Шрифт awesome 5 на псевдоэлементах

В шрифте awesome 4 вы можете легко применить значок к элементу: before/: after с помощью CSS.

То же самое можно сделать с новым шрифтом, потрясающим 5 JS/SVG-реализацией? Как видно из этого, требуется, чтобы соответствующий тег существовал в html, что не всегда практично, например. у вас есть CMS и вы хотите применить значок ко всему созданному пользователем контенту <li> elements

Я знаю, что в FA5 вы все равно можете использовать старые css/webfonts, но было бы неплохо, если бы в рекомендуемом методе использования JS

Ответ 1

Вам нужно включить его (он по умолчанию отключен).

<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

Css:

.class:before{
  display: none;
  content: "\f16c";
  font-family: "Font Awesome 5 Brands";
}

Другие типы: Шрифт Awesome 5 + Solid или Regular или Light или Brands

Ответ 2

Задание правильного font-weight кажется ключевым для правильного отображения некоторых символов (а не "□□□").

font-weight должен быть:

400 для Regular и Brands символов
900 для Solid символов
300 для Light символов

Т.е. если вы используете Font-Awesome с CSS + веб-шрифтами, решение только для CSS:

@import url("font-awesome/css/fontawesome-all.min.css"); /* FA CSS import */

/* ... */

.class:before {
    /* >> Symbol you want to use: */
    content: "\f16c";
    /* >> Name of the FA free font (mandatory), e.g.:
               - 'Font Awesome 5 Free' for Regular and Solid symbols;
               - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
               - 'Font Awesome 5 Brand' for Brands symbols. */
    font-family: 'Font Awesome 5 Free';
    /* >> Weight of the font (mandatory):
               - 400 for Regular and Brands symbols;
               - 900 for Solid symbols;
               - 300 for Light symbols. */
    font-weight: 900;

    /* >> Optional styling: */
    display: inline-block;
    /* ... */
}

Ответ 3

Я думаю, что он работает отлично так:

.class:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

Ответ 4

Мне нужно 5 работать, используя

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

в <head> и

:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  content: "\f167";
}

в моем css

Ответ 5

Если вы используете Fort Awesome для обслуживания своих значков, вам нужно добавить font-family: <my-kit-name>, не нужно использовать font-weight: 400/900.

Для получения дополнительной информации смотрите эту ссылку:

https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a

Ответ 6

Используйте эту ссылку ->: https://use.fontawesome.com/releases/v5.5.0/css/all.css

CSS

ul li{
    list-style-type: none;
    position: relative;
}

ul li:before{
  position: absolute;
  color:#ff0000;
  top:0;
  left:-30px;
  font-family: 'Font Awesome 5 Free';
  font-size:1.2em;
  content: "\f105";
  font-weight: 900; /* <-- add this or 400 for other styles */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

Ответ 7

Моя проблема исчезнет, когда я установлю это значение: font-weight: 900;