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

FONT AWESOME

Вся эта красота делается довольно просто 🙂

 

Шаг 1. Вы подключаете стиль этого шрифта в область <head> своего сайта:

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

В данном случае вам даже не нужно загружать css-файлы на свой хостинг. Файл будет подгружаться с глобального CDN хранилища.

Если вам нужен вариант когда файлы лежат на вашем сервере, то скачать все это дело можно на официальном сайте.

 

Шаг 2. В том месте страницы, где вы хотите задействовать иконку добавляете html код этой иконки.

Код любой иконки можно узнать на странице со списком всех иконок шрифта. Просто кликните по выбранной иконке и у вас откроется страница, где можно взять ее код.

FONT-AWESOME-1

Вот и все теперь там где вас нужно вывести символ просто вставляйте соц.сети «Одноклассники», просто в коде страницы добавляйте такой код и получаете такой символ:  

 

 

Теги: