Font Awesome 图标在 HTML 中不起作用

Question

我一直在开发 Javascript 待办事项应用程序，其中包括一些来自 Font Awesome 的图标。但他们只是没有出现。到目前为止我已经尝试过：

禁用广告拦截器并重新加载页面
尝试不同的浏览器。
删除 CDN 并在项目中使用 Font Awesome CSS 本身。

我已经用谷歌搜索过这个问题，仔细检查了我的 CDN link，检查了最近的文档，一切似乎都很好。我做错了什么？

我附上了 HTML 代码片段和下面浏览器的屏幕截图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@300&family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>To do List</title>
</head>
<body>
    <header>
        <h1>My todo list</h1>
    </header>
    
    <form>
        <input type="text" class="todo-input">
        <button class="todo-button" type="submit">
            <i class="fas fa-user-md"></i>
        </button>
        <div class="select">
            <select name="todos" class="filter-todo">
                <option value="all">All</option>
                <option value="completed">Completed</option>
                <option value="uncompleted">Uncompleted</option>
            </select>
        </div>
    </form>

    <div class="todo-container">
        <ul class="todo-list"></ul>
    </div>
    
    <script src="app.js"></script>
</body>
</html>

Browser View

Answer 1

将fas fa-user-md改为fa fauser-md，直接添加到button。

像这样-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@300&family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>To do List</title>
</head>
<body>
    <header>
        <h1>My todo list</h1>
    </header>
    
    <form>
        <input type="text" class="todo-input">
        <button class="todo-button fa fa-user-md" type="submit">
        </button>
        <div class="select">
            <select name="todos" class="filter-todo">
                <option value="all">All</option>
                <option value="completed">Completed</option>
                <option value="uncompleted">Uncompleted</option>
            </select>
        </div>
    </form>

    <div class="todo-container">
        <ul class="todo-list"></ul>
    </div>
    
    <script src="app.js"></script>
</body>
</html>

Edit：Font Awesome 5 及更高版本支持 fas、far 等。本例使用的版本是4.7.0，支持fa.

Font Awesome 图标在 HTML 中不起作用

Font Awesome Icons are not working in HTML

html

css

icons

font-awesome