Как создать кнопки (пример внутри)

narem · February 5, 2017

сверху 3 кнопки соц сетей, как такие создать? Они не картинками вставлены.

Т.е если бы просто нужно было бы кнопки, я бы просто вставил картинку, но тут проблема в том, что при ховере с эфектом перехода меняется цвет

Veseloff · February 5, 2017

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

narem · February 5, 2017

20 минут назад, Veseloff сказал:

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

Кастомный в плане они сами пилили? Где его достать? Как посмотреть какой шрифт?

Q4Dizzy · February 5, 2017

font-family: 'ElegantIcons';

Есть сервисы с готовыми паками шрифтов или для генерации - icomoon, fontAwesome и т.д.

BrusSENS · February 5, 2017

Ну всё довольно просто, юзают Font Awesome и Elegant Icons.

narem · February 5, 2017

Такой еще вопрос. Скачал и поставил шрифт.

Пытаюсь при помощи юникода вставить в css - не выходит. Вместо символа - пустой квадрат.

Но если пишу напрямую в шаблоне "<i class="fa fa-facebook" aria-hidden="true"></i>" то все работает. Может кто подсказать?

Q4Dizzy · February 5, 2017

Иконки имеют своё название\номер.

для примера иконка гугла имеет вид (номер и вообще название в значении content может быть другим)

.fa {
  display: inline-block;
  font-family: FontAwesome;
}

.fa-star-o:before {
  content: "/e900";
}

<i class="fa fa-star-o"></i>

Вот мы и получаем.. Элемент (тег) i c классом fa, которому назначены свойства, и класс fa-star-o, у которого есть псевдо-элемент с контентом иконки.

Question