Иконки Font Awesome не работают в HTML - PullRequest
Новая
       42

Иконки Font Awesome не работают в HTML

1 голос
/ 06 августа 2020

Я работал над приложением Javascript To-Do и включил несколько иконок из Font Awesome. Но они просто не появляются. До сих пор я пробовал:

  1. Отключение блокировщиков рекламы и перезагрузка страниц
  2. Пробовал разные браузеры.
  3. Удаление CDN и использование самого Font Awesome CSS в project.

Я уже искал в Google по этой проблеме, дважды проверил свою ссылку CDN, проверил недавнюю документацию, и все в порядке. Что я сделал не так?

Я прикрепил фрагмент кода 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>

Просмотр в браузере

1 Ответ

1 голос
/ 06 августа 2020

Замените 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 : fas, far et c поддерживается в Font Awesome 5 и выше. В этом примере используется версия 4.7.0, которая поддерживает fa.

...