Я включил 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'
Ваш 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" на некоторые значки, чтобы они отображали их.
#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 */
}
Проблема в font-weight.
Для Font Awesome 5 вам нужно использовать {font-weight:900}
Использование файла 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"); }Требование веса 900 - это не странность, а преднамеренное ограничение, добавленное FontAwesome (так как они имеют одинаковый юникод, но разный вес шрифта), так что вы не сможете использовать "сплошные" и "легкие" значки, большинство которые доступны только в платной версии "Pro".
С FontAwesome 5 вам нужно включить новый параметр "searchPseudoElements", чтобы использовать значки FontAwesome таким образом:
<script>
window.FontAwesomeConfig = {
searchPseudoElements: true
}
</script>
Смотрите также этот вопрос: Шрифт awesome 5 на псевдоэлементах и новый API шрифтов Awesome: https://fontawesome.com/how-to-use/font-awesome-api
Дополнительно, измените семейство шрифтов в вашем CSS-коде на
font-family: "Font Awesome 5 Regular";
Я не хотел использовать версию 'all', поэтому искал fontawesome-all.min.css ' 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;
}
Npm я --save @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";
Это работало хорошо для меня!
Я испробовал все вышеперечисленные решения для Font Awesome 5, но у меня это не сработало. :(
Наконец-то я получил решение!
Просто используйте font-family: "Font Awesome 5 Pro"; в вашем CSS вместо того, чтобы использовать font-family: "Font Awesome 5 Free OR Solids OR Brands";
решение - назвать его обычным шрифтом:
@font-face {
font-family: "Font Awesome 5 Free-Regular-400";
src: url(../fonts/Font%20Awesome%205%20Free-Regular-400.otf) format("opentype");}
Странно, вы должны включить семейство шрифтов и вес шрифта, чтобы он работал. Вот что сработало для меня:
.second-section-header::after {
content: "\f259";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}
Оттуда вы можете начать добавлять любые стили, которые вы хотите.
Позвольте сказать:
.second-section-header::after {
content: "\f259";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
font-size: 100px;
color: white;
z-index: 1;
position: absolute;
}
Надеюсь, это поможет.
введите код
как это
<head><script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script></head>
и узнайте, как начать https://fontawesome.com/get-started
Я рекомендовал для вас это лучше http://fontawesome.io/
Я нашел решение.
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; }
Если вы используете SVG с JavaScript, вам нужно включить это, потому что он отключен по умолчанию. использование
<script data-search-pseudo-elements... >
внутри вашего скрипта тега.
что, вероятно, о модели ценообразования...;)
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Solid Free fas <i class="fas fa-camera"></i>
Regular Pro Required far <i class="far fa-camera"></i>
Light Pro Required fal <i class="fal fa-camera"></i>
Brands Free fab <i class="fab fa-font-awesome"></i>
Мне пришлось установить searchPseudoElements в true, чтобы заставить его работать в Angular5.
import fontawesome from '@fortawesome/fontawesome';
...
fontawesome.config.searchPseudoElements = true;
...
content: "\f12a";
font-family: 'Font Awesome 5 Solid';