Сокращение кода при работе с Font Awesome
Иконочный шрифт Font Awesome приобрёл огромную популярность в мировом сообществе веб-дизайнеров, благодаря его универсальности, масштабированию без потери качества и возможностью стилизации. Я предлагаю простой способ небольшого сокращения и оптимизации кода при работе с ним.
Обычно в каскадной таблице стилей для Font Awesome описывается стандартное правило:
/* Font-Awesome */
@font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
transform: translate(0, 0);
}
/* Допустим, что мы хотим использовать значок сайта «ВКонтакте» */
.fa-vk:before {content: "\f189";}
В файле html, в том месте, где должен находиться значок мы пишем:
<i class="fa fa-vk"></i>
Первый класс «fa» применяет общие для всех значков Font Awesome правила, второй – «fa-vk», описывает, какой значок нам необходимо использовать в этом случае. От первого класса легко избавиться, тем самым сократив количество html-элементов! Для этого нужно просто изменить синтаксис класса «fa» в файле css.
Если его записать следующим образом:
[class*=fa] {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
transform: translate(0, 0);
}
Что обозначает – «все классы, содержащие в своём названии слово fa», то в html-файле можно написать уже короткий вариант:
<i class="fa-vk"></i>
Этот элемент будет подчиняться и общему правилу, и укажет, какой значок нужно использовать в этом случае. Вот так просто мы сократили код html-файла всего лишь с помощью синтаксиса! Вроде бы пустяк, но приятный. Нужно всегда стремиться к оптимизации кода!
Успехов в сайтостроении!
Опубликовал Administrator - 9 ноября 2016, 11:14 - 306 просмотров
Похожие записи: Обновления моего проекта на GitHub