Шрифты для иконок на сайте

09 октября 2013  8048  CSS, Шрифты

 

Шрифты для иконок — достойная альтернатива рутинной отрисовке базовых иконок (пиктограмм) на сайтах. Шрифты масштабируются, имеют хорошую кроссбраузерность, позволяют применять к ним различные свойства и эффекты CSS, а также имеют легкую настройку — папка со шрифтом и стилями находится в корне сайта, а сам шрифт вызывается короткой строчкой HTML-кода.

Например, в наборе шрифта Font Awesome, иконка календаря  или комментария 

<i class="icon-calendar"></i> 
<i class="icon-comments"></i> 

Наборы шрифтов-иконок

Установка набора Font Awesome 3.2.1

Качаем архив, распаковываем его. В папке [css] копируем два файла: font-awesome.min.css, font-awesome-ie7.min.css и вставляем их в папку [font]. Открываем файл font-awesome.min.css в редакторе кода (например, Notepad++) и редактируем путь к шрифту так, чтобы он указывал на папку [font] со шрифтами — url('../font/… меняем на url('/font/…

Загружаем папку [font] в корень сайта.

Подключаем стили шрифта и поддержку IE7 — вставляем код в шаблон или страницу.

<link rel="stylesheet" href="/font/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="/font/font-awesome-ie7.min.css" />
<![endif]-->

Выбираем иконку и вставляем код в нужное место страницы. Например, иконка фотокамеры 

<i class="icon-camera"></i> 

Настройка шрифта-иконок

Иконки могут иметь любой цвет и размер через CSS.

<i style="font-size:500px; color:#2FCC71;" class="icon-coffee"></i>
<i style="font-size:200px; color:#2861A6;" class="icon-windows"></i>

 

Комментарии для сайта Cackle
наверх