Font Awesome 5 показывает пустой квадрат при использовании версии JS + SVG

Попытка заменить тип маркера в теге элемента списка значком Font Awesome, но я получаю пустой квадрат:

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  margin: 0 5px 0 -15px;
  color: #004d00;
  display: inline-block;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>

Я знаю, что библиотека шрифтов загружается, потому что я смог использовать <i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li>, и шрифт был правильно отрисован (хотя и с неправильным стилем).


css font-awesome font-awesome-5
person Elcid_91    schedule 12.02.2018    source источник
comment
Ага! Загрузка JS-версии. Будет DL версию CSS и дать ей шанс. Спасибо за совет.   -  person Elcid_91    schedule 12.02.2018
comment
Темани - не понимаю, что вы имели в виду под последним комментарием.   -  person Elcid_91    schedule 12.02.2018

Ответы (2)


arrow_upward
14
arrow_downward

Если вы используете версию CSS, прочтите следующее: Font Awesome 5, почему содержимое css не отображается ?

Используя последний выпуск Font Awesome 5, вы можете включить использование псевдоэлемента с версией JS, добавив data-search-pseudo-elements, как показано ниже:

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  display:none; /* We need to hide the pseudo element*/
}
/*target the svg for styling*/
.testitems svg {
  color: blue;
  margin: 0 5px 0 -15px;
}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i>

Вы можете проверить документация для получения более подробной информации:

Если вы используете нашу инфраструктуру SVG + JS для рендеринга значков, вам необходимо сделать несколько дополнительных вещей:

Включить псевдоэлементы

Использование псевдоэлементов CSS для рендеринга значков по умолчанию отключено при использовании нашей SVG + JS Framework. Вам нужно будет добавить атрибут <script data-search-pseudo-elements ... > к элементу <script />, который вызывает Font Awesome.

Отключить отображение псевдоэлементов

Поскольку наш JS найдет каждую ссылку на значок (используя стиль вашего псевдоэлемента) и автоматически вставит значок в DOM вашей страницы, нам нужно будет скрыть настоящий отображаемый псевдоэлемент, созданный с помощью CSS.

person Temani Afif    schedule 12.02.2018

arrow_upward
1
arrow_downward

Как указано в документации Font Awesome о том, как включить псевдокласс ...

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems::before {
  font-family: "Font Awesome 5 Solid";
  content: "\f058";
  display: none;
}
.user::before{
  font-family: "Font Awesome 5 Solid";
  content: "\f007";
  display: none;
}
<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>
<i class="fa fa-user"></i><br>
<a class="user" href="#">User</a>

person Eli Peters    schedule 20.02.2018