Что такое FontAwesome?
Font Awesome — это набор масштабируемых векторных иконок. Основной плюс и удобство этого набора — возможность лёгкой персонализации. Любой иконке Вы можете задать свой размер, цвет, тени и все, что делается силами CSS. К тому же это абсолютно бесплатно. Сборка иконок версии Font Awesome 4.5.0 состоит из 605 иконок!
Как установить FontAwesome?
СПОСОБ 1
Для установки на ваш сайт набора иконок Font Awesome нужно выполнить несколько несложных шагов:
- Скачать дистрибутив с сайта fontawesome.io. Версия 4.5.0 весит 538 Кб.
- Распаковать архив и скопировать папку «font-awesome-4.5.0», например, в корень вашего сайта, туда где лежит файл index.
- Подключить файлы в <head> Вашего сайта. Перед закрывающимся тегом </head> поместить строчку: <link rel=»stylesheet» href=»/font-awesome/css/font-awesome.css»>. Не забудьте изменить путь, если скопировали папку с шрифтами в другое место.
На этом установка пакета иконок Font Awesome закончена.
СПОСОБ 2
Способ подходит для платформы WordPress и для тех кто не хочет занимать лишнее место на своём FTP. Скопируйте функцию в свой файл functions.php (Админка WP — Внешний вид — Редактор). Сохраняем изменения и можно пользоваться.
function font_awesome() {
if (!is_admin()) {
wp_register_style('font-awesome', 'http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css');
wp_enqueue_style('font-awesome');
}
}
add_action('wp_enqueue_scripts', 'font_awesome');
Как пользоваться FontAwesome?
Для вставки иконки на сайт идём сайт fontawesome.ru/all-icons/, выбираем нужную иконку и копируем её тег . Например, для иконки anchor тег <i class="fa fa-anchor"></i>. Вставляем тег в нужное место и получаем:
Изменяем размер font awesome icons
Для изменения размера пользуемся одним из дополнительных тегов: fa-5x, fa-4x, fa-3x, fa-2x, fa-lg. Например:
<i class="fa fa-anchor fa-lg"></i> fa-lg
<i class="fa fa-anchor fa-2x"></i> fa-2x
<i class="fa fa-anchor fa-3x"></i> fa-3x
<i class="fa fa-anchor fa-4x"></i> fa-4x
<i class="fa fa-anchor fa-5x"></i> fa-5x
fa-lg fa-2x fa-3x fa-4x fa-5x
Поворачиваем font awesome icons
Чтобы повернуть иконку как и в случае с размером добавляем к основному тегу:
<i class="fa fa-home fa-5x fa-rotate-90"></i>
<i class="fa fa-home fa-5x fa-rotate-180"></i>
<i class="fa fa-home fa-5x fa-rotate-270"></i>
<i class="fa fa-home fa-5x fa-spin"></i>
<i class="fa fa-home fa-5x fa-pulse"></i>
Группировка иконок font awesome
Для наложения одной иконки на другую создаем родительский класс fa-stack, класс fa-stack-1x используем для стандартного размера иконки, а класс fa-stack-2x для увеличенного.
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-home fa-stack-1x"></i>
</span>
Как изменить цвет у иконки font awesome
Для того чтобы изменить цвет иконки можно дописать внутри тега <i> свойство style. Либо положить иконку в один из тегов: <span>, <p>, <div>, с присвоенным классом стилей из файла styles.css.
<i class="fa fa-home fa-5x" style="color: red"></i>
Если вы хотите сделать из иконки ссылку, то просто поместите её в тег <a>.
Пожалуй все самые основные моменты при использовании иконок от Font Awesome я описал. Если остались вопросы — задавайте их в комментариях.
Оставить комментарий