Как вывести иконку fontawesome через псевдоэлемент?

Question

[Alex_87]

Здравствуйте! Прошу помочь найти ошибку. Не выводится иконка. Сразу скажу, что awesome CDN подключён на сайте.

html

:
<li class="map-i"><a href="#">Adress</a></li>

css

.map-i{
        &:before{
          position:absolute;
          left:2px;
          content: "\f015";
          font-family: FontAwesome;
          font-size:18px;
        }
      }

Выводится:

Comments

[Rsa97]

Так а сам то шрифт как подключен?

[Alex_87]

Rsa97,
да, подключён:

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

Answer 1

[Rsa97]

Используйте стандартный способ:

<li class="map-i"><a href="#"><span class="fa fa-home"></span>Adress</a></li>

Если хотите сделать через свой класс, то исправьте
font-family: "Font Awesome 5 Pro"

Comments

[Alex_87]

в том то и дело, что сейчас нужно не стандартным способом. Стандартным действительно выводится

[Rsa97]

Alex_87, Тогда исправьте font-family. Сейчас вы грузите пятую версию шрифта, а указываете название четвёртой версии.

Answer 2

[sinneren]

Шрифт применяется не к псевдоэлементу, а к элементу

Comments

[Alex_87]

а что именно не так с синтаксисом, подскажите

.map-i{
        &::before{}
}

[sinneren]

Alex_87, я про синтаксис ничего не говорил,я сказал куда применять шрифт, можно просто на документацию посмотреть, на примеры