it-swarm.com.ru

fontawesome 5 семейство шрифтов не работает

Я интегрировал fontawesome 5 в проект с начальной загрузкой 4. Когда я вспоминаю шрифт через css, он не работает . С fontawesome 4, код был следующим:

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
float: right;
content: '\f107';
font-family: 'FontAwesome'; }

Я пытался изменить имя шрифта, но это не работает

font-family: 'Font Awesome 5 Free'
28
Carmelo Valenti

Ваш Unicode неправильный f107

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
}
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<a>User</a>
<i class="fas fa-shopping-basket"></i>

Или в другом случае font-weight: 900; спасет вас. Некоторые иконки в шрифте awesome 5 не работают без font-weight: 900;.

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}
79
Pedram

Как ни странно, вы должны поместить ' font-weight: 900 ' в некоторые значки, чтобы они отображались.

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
  content: '\f107';
  font-family: 'Font Awesome\ 5 Free'; 
  font-weight: 900; /* Fix version 5.0.9 */
}
54
Lenin Zapata

Проблема в font-weight.
Для Font Awesome 5 вы должны использовать {font-weight:900}

10
www.admin.ge

Использование файла fontawesome-all.css: изменение семейства шрифтов «Brands» с «Font Awesome 5 Free» на «Font Awesome 5 Brands» устранило проблемы, с которыми я столкнулся. 

Я не могу взять весь кредит - я исправил свою собственную локальную проблему прямо перед просмотром версии CDN: https://use.fontawesome.com/releases/v5.0.6/css/all.css

У них также есть проблема с CDN.

 @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    src: url("../webfonts/fa-brands-400.eot");
    src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

    .fab {
    font-family: 'Font Awesome 5 Brands'; }
    @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

6
JTStuedle

Начиная с FontAwesome 5, вы должны включить новую опцию "searchPseudoElements", чтобы использовать значки FontAwesome следующим образом: 

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

См. Также этот вопрос: Font awesome 5 для псевдоэлементов и новый Font Awesome API: https://fontawesome.com/how-to-use/font-awesome-api

Кроме того, измените семейство шрифтов в вашем коде CSS на 

font-family: "Font Awesome 5 Regular";
3
Mesa

Требование веса 900 - это не странность, а преднамеренное ограничение, добавленное FontAwesome (так как они используют один и тот же юникод, но разный вес шрифта), так что вам не придется использовать «сплошные» и «легкие» значки, большинство которые доступны только в платной версии «Pro».

3
user3006765

Я не хотел использовать версию 'all', поэтому искал файл 'fontawesome-all.min.css' (ранее включенный в заголовок) для поиска тега 'family' и нашел в конце объявление @font-face{font-family:**Font Awesome\ 5 Free**;font-style:normal;

Итак, в таблице стилей для элемента, где я хотел использовать код content: "\f0c8";, я добавил (или изменил на) font-family: Font Awesome\ 5 Free;, и это сработало.

.frb input[type="checkbox"] ~ label:before {
    font-family: Font Awesome\ 5 Free;
    content: "\f0c8";
    font-weight: 900;
    position: absolute;
}
2
WojCup

Я нашел решение.

  • Интегрировать fontawesome-all.css
  • В конце файла найдите второй @ font-face и замените

    font-family: 'Font Awesome 5 Free';

С

font-family: 'Font Awesome 5 FreeR';

И заменить:

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }

С

.far {
  font-family: 'Font Awesome 5 FreeR';
  font-weight: 400; }
0
Carmelo Valenti

npm я - сохранить @ Fortawesome/Fontawesome-бесплатно

Мои Sccs:

@import "[email protected]/fontawesome-free/scss/fontawesome";
@import "[email protected]/fontawesome-free/scss/brands";
@import "[email protected]/fontawesome-free/scss/regular";
@import "[email protected]/fontawesome-free/scss/solid";
@import "[email protected]/fontawesome-free/scss/v4-shims";

Это работало хорошо для меня!

0
Tan Nguyen

решение - назвать его обычным шрифтом:

@font-face {
font-family: "Font Awesome 5 Free-Regular-400";
src: url(../fonts/Font%20Awesome%205%20Free-Regular-400.otf) format("opentype");}
0
Menzezzz

Если вы используете SVG с JavaScript вам нужно включить это, потому что по умолчанию он отключен. использование 

<script data-search-pseudo-elements ... > 

внутри вашего скрипта тега.

0
Juri