Как добавить Font Awesome в кнопку через CSS

Question

Мой код выглядит сейчас так:

    .close_task {
        display: inline-block;
        position: relative;
        left: 15px;
        outline: none;
        border: none;
        font-size: 19px;
        font-family: "Font Awesome 5 Free";
        content: "\f00d";
    }

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous">
    
    <button class="close_task"></button>

Иконка не добавляется в кнопку. В похожих вопросах находил только варианты с псевдоклассами, а вопрос в том, как сделать это без них?

Answer 1

Иконки Font Awesome можно добавить несколькими способами:

C помощью элемента i:
```
<i class="fas fa-ad"></i>
```

C помощью псевдоклассов before / after:

div::before {
   content: "\f641"
   font-family: "Font Awesome 5 Free";
}

Скачав SVG и добавив на страницу как изображение или в виде кода.

Для вариантов 1-2 нужно добавить саму библиотеку:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" crossorigin="anonymous">

БЛОГ НА HUSL

Как добавить Font Awesome в кнопку через CSS

Ответы (1 шт):