Сокращение кода при работе с Font Awesome



Сокращение кода при работе с 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 - 242 просмотра


Похожие записи: Обновления моего проекта на GitHub


Комментарии




Зарегистрируйтесь или войдите в Ваш аккаунт, чтобы оставить комментарий.



 
15 ноября 2016, 08:37 «Цитировать»
В ближайшее время проведу эксперимент. Проверю скорость загрузки с двумя вариантами CSS. Следите за обновлениями.

---
В действительности всё не так, как на самом деле!

 
9 ноября 2016, 19:36 «Цитировать»
Естественно, что я написал об этом варианте и создателю Font Awesome, но Dave Gandy мне ответил, что не они не используют селектор "*", потому что он замедляет рендеринг страниц, но при нынешних скоростях сетей, в том числе и мобильных, я считаю этот фактор не существенным. Тем более для тех, кто использует громоздкие фреймворки... Это моё личное мнение.

---
В действительности всё не так, как на самом деле!

 

Вход на сайт


Avatar