Как использовать Font Awesome в css-свойстве content?

Гость | 24 марта 2017, 15:48 | 1

Как поставить font-awesome через before? Хочу попробовать использовать иконки Font Awesome перед ссылками (и после них)

1
2
3
a:before {
    content: "<i class='fa...'>...</i>";
}
1
2
3
a:after{
    content: "<i class='fa...'>...</i>";
}

Знаю, что нельзя использовать HTML код в content, но есть ли возможность установить туда иконку?

CSS

Решения

 WPPW |   24.03.2017 в 16:51

Для FontAwesome 5

font-family может быть Font Awesome 5 Free или Font Awesome 5 Brands;

1
2
3
4
a::before {
   font-family: "Font Awesome 5 Free";
   content: "\f2dc";
}

Метод для FontAwesome ниже 5 версии, например для FontAwesome 4.7.0

Для начала, найдите подходящую иконку, затем зайдите на страницу выбранной иконки и найдите её Unicode обозначение.
Например, http://fontawesome.io/icon/snowflake-o/ имеет Unicode: f2dc.
Затем, пропишите:

1
2
3
4
a:before {
   font-family: FontAwesome;
   content: "\f2dc";
}

Код выше применит иконку ко всем ссылкам сайта. Чтобы иметь возможность поставить иконку конкретно на определённый сайт, можно пометить класс

1
2
3
4
a.mylink:before {
   font-family: FontAwesome;
   content: "\f2dc";
}

Чтобы иметь возможность поставить отступ между иконкой и ссылкой, можно использовать свойство display:inline-block и padding-right
Также иконке можно задать свой цвет color: #F00;, и выровнять её на один уровень с текстом vertical-align: middle;

1
2
3
4
5
6
7
8
a.mylink:before {
  font-family: FontAwesome;
  content: "\f2dc";
  display: inline-block;
  padding-right: 5px;
  vertical-align: middle;
  color: #F00;
}

Также, можно менять иконку при наведении курсора на неё

1
2
3
4
a.mylink:hover:before {
  content: "\f099";
   color: #0CD;
}

Ещё вопросы