Awesome font before: CSS Pseudo-elements | Font Awesome Docs

css — Не работает Font Awesome если указывать через :before

Столкнулся с проблемой — используя иконки в CSS с помощью псевдоэлементов — вместо самой иконки появляется просто квадрат. Если же указать в HTML через тег <i>, то всё работает. Я пробовал подключать ссылки разных версий, на данный момент стоит последняя:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-VY3F8aCQDLImi4L+tPX4XjtiJwXDwwyXNbkH7SHts0Jlo85t1R15MlXVBKLNx+dj" crossorigin="anonymous">

Вот пример как я подключал:

.breadcrumbs ul li a {
    position: relative;
    font-size: 15px;
    font-weight: normal;
    line-height: 6px;
    color: #454647;
    padding-right: 35px;
}
.breadcrumbs ul li a:before {
    position: absolute;
    font-family: FontAwesome;
    top: 0;
    right: 0;
    content: "\f30b";
}

• css
• шрифты
• fontawesome

4

Почему при выборе

ALL стрелки отказываются рисоваться не знаю. В режиме SOLID они отображаются:

.breadcrumbs ul li a {
    position: relative;
    font-size: 15px;
    font-weight: normal;
    line-height: 6px;
    color: #454647;
    padding-right: 35px;
}

.breadcrumbs ul li a:before {
    position: absolute;
    font-family: Font Awesome\ 5 Free;
    top: 0;
    right: 0;
    content: "\f30b";
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/solid.css" integrity="sha384-29Ax2Ao1SMo9Pz5CxU1KMYy+aRLHmOu6hJKgWiViCYpz3f9egAJNwjnKGgr+BXDN" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/fontawesome.css" integrity="sha384-Lyz+8VfV0lv38W729WFAmn77iH5OSroyONnUva4+gYaQTic3iI2fnUKtDSpbVf0J" crossorigin="anonymous">
<div>
  <ul>
    <li><a href="#">Пункт1</a></li>
    <li><a href="#">Пункт2</a></li>
  </ul>
</div>

. icon:before {
    position: absolute;
    font-family: Font Awesome\ 5 Free;
    top: 0;
    left: 0;
    content: "\f30b";
    font-weight: 900;
}

.icon2:before {
    position: absolute;
    font-family: Font Awesome\ 5 Brands;
    top: 20px;
    left: 0;
    content: "\f17e";
    color:blue;
}

<link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet"/>


<i></i>
<br>
<i></i>

Смотрите на первый класс иконки если fab значит:

font-family: Font Awesome\ 5 Brands;

если fas значит:

font-family: Font Awesome\ 5 Free;
font-weight:900;

5

Font Awesome чувствителен к значению font-weight У меня бывало пару раз так, что наследовалось значение 400, и я долго не мог понять , что не так! (нужно было прописать значение font-weight 600-900 или bold)

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — как добавить значок шрифта awesome после перед элементами

Задавать вопрос

спросил 4 года 8 месяцев назад

Изменено 4 года, 8 месяцев назад

Просмотрено 23 тысячи раз

Привет, я пытаюсь добавить значок шрифта awesome в элементы до и после элементов.

Но я не знаю, как написать его css и как получить ссылки на значки шрифта Awesome, чтобы поместить их после перед css.

Я создал такую ​​структуру.

 
<голова>


<стиль>
.thish {позиция: относительная; высота: 150 пикселей; ширина: 150 пикселей; фон:красный; }
.thish::before{position:absolute; содержание: 'tyjthsrgd'; право: 40%; цвет:#000; дно:0; высота: 30 пикселей; ширина: 60 ​​пикселей; фон:зеленый; z-индекс: 1; }


<тело>
<дел>

 content: "\f2ba";
   шрифт: нормальный нормальный нормальный 14px/1 FontAwesome;
 

 

<голова>
  


<стиль>
  .этот {
    положение: родственник;
    высота: 150 пикселей;
    ширина: 150 пикселей;
    фон: красный;
  }
  
  .thish :: до {
    положение: абсолютное;
   содержимое: "\f2ba";
   шрифт: нормальный нормальный нормальный 14px/1 FontAwesome;
    справа: 40%;
    цвет: #000;
    внизу: 0;
    высота: 30 пикселей;
    ширина: 60 ​​пикселей;
    фон: зеленый;
    z-индекс: 1;
  }
 
 

<тело>

  <дел>