2016-06-22

Калькулятор значений для "content" в FontAwesome

От автора: Сегодня мы рассмотрим как вывести иконку FontAwesome в любой блок

Для начала нам нужно установить FontAwesome на наш сайт, для этого в head нашего сайта добавим строчку

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

На этой странице http://fontawesome.io/cheatsheet/ все символы, выделяем нужный символ и копируем, вставляем символ в поле ниже

 

Допустим ну нас есть блок в HTML:

<a class="secondary hollow button float-right see-more" href="#">Полный список</a>

Добавляем немного стилей CSS

.see-more {
  position: relative;
  font-size: rem-calc(16);
  padding: 0.75em 0.9em;
  padding-right: 45px;

  &::after {
    content: "\F18E"; // Тут наше сгенерированное значение
    position: absolute;
    font-family: FontAwesome;
    font-size: 21px;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: -2px 12px;
  }
}
Написать комментарий
Поля отмеченные * обязательны