Font Awesome в псевдоэлементах CSS не отображается
У меня есть потрясающая бесплатная версия css, связанная в моем индексе html / php, поэтому, если я вызываю какие-либо значки FA на этой странице напрямую, они работают нормально.
Однако я пытаюсь применить некоторые из них к псевдоэлементам в моем CSS, и я не могу заставить его работать. Он показывает только пустой квадрат / коробку.
Я просмотрел документы и попробовал это с одинарными и двойными кавычками, но неважно, что это по-прежнему пустой квадрат.
Кому-нибудь понятно, что я здесь делаю не так?
a[aria-expanded = "false"]::before, a[aria-expanded = "true"]::before {
font-family: "Font Awesome 5 Solid";
content: "\f106";
font-weight: 400;
display: block;
position: absolute;
right: 20px;
font-size: 0.6em;
}
a[aria-expanded = "true"]::before {
font-family: "Font Awesome 5 Solid";
content: "\f106";
}
ОЧЕНЬ минимальный код, большая часть CSS и JS удалена https://codepen.io/anon/pen/yEeZWX
есть ли у вас шрифт, бренд или бесплатный шрифт, не уверен, что твердый доступен ... font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";
@CameronHurd не подумал об этом, просто добавил очень урезанную версию одного
@ G-Cyr Да, в настоящее время все они используются в CSS, но по-прежнему ничего
ладно, может это связано с размером шрифта;) codepen.io/anon/pen/zarbYj
Ответы 2
Используйте "Бесплатно" в font-family: "Font Awesome 5 Free";
Я также использую display: inline-block;, чтобы установить их рядом
Hre работает JSFiddle с вашим кодом: https://jsfiddle.net/8vge3rkv/
a[aria-expanded = "false"]::before, a[aria-expanded = "true"]::before {
font-family: "Font Awesome 5 Free";
content: "\f106";
font-weight: 900;
display: inline-block;
}
a[aria-expanded = "true"]::before {
font-family: "Font Awesome 5 Solid";
content: "\f106";
}<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity = "sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin = "anonymous">
<a href = "#" aria-expanded = "false">try me</a>Семейство Font должно указывать Free.
.
Также обратите внимание, что для твердых значков вам придется использовать font-weight:900.
a[data-toggle = "collapse"] {
position: relative;
}
a[aria-expanded = "false"]::before,
a[aria-expanded = "true"]::before {
font-family: "Font Awesome 5 Free";
content: "\f106";
font-weight: 900;
display: block;
position: absolute;
right: 20px;
font-size: 0.6em;
}
a[aria-expanded = "true"]::before {
font-family: "Font Awesome 5 Solid";
content: "\f106";
}<link href = "https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel = "stylesheet" />
<div class = "wrapper">
<nav id = "sidebar">
<li class = "active">
<a href = "#pageSubmenu" data-toggle = "collapse" aria-expanded = "false">
<i class = "far fa-file-alt"></i> Pages
</a>
</li>
</nav>
</div>Спасибо, я принимаю это, потому что это объясняет проблему, однако мне также пришлось установить для псевдоэлементов значение true с помощью JS.
Это работает только в том случае, если вы загружаетесь с помощью метода веб-шрифтов и CSS (тег link), в отличие от инфраструктуры SVG и JS (тег script).
@Todd Да, потому что только метод веб-шрифтов и CSS использует FONT. SVG и JS визуализируются с использованием файлов SVG, а не FONT.
решил мою проблему.
Можете ли вы изолировать проблему в кодовом коде или подобном окружении?