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

[narem 0]

http://preview.themeforest.net/item/landx-multipurpose-wordpress-landing-page/full_screen_preview/9545842

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

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

[Veseloff 404]

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

[narem 0]

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

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

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

 

[Q4Dizzy 63]

font-family: 'ElegantIcons';

 

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

[BrusSENS 14]

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

[narem 0]

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

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

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

[Q4Dizzy 63]

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

 

для примера иконка гугла имеет вид (номер и вообще название  в значении 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, у которого есть псевдо-элемент с контентом иконки.