Awebdesign's Blog

Использование @font-face в качестве иконок

Посмотреть демо использования шрифта в качестве иконок можно на блоге Some Random Dude.

Данный тьютор основан на @font-face CSS rule, :before selector и content rule.

Первое правило позволяет включать любые шрифты и использовать их по мере необходимости, таким образом наши возможности не ограничены шрифтами web-safe. Поэтому мы можем также включать шрифты с символами-картинками, как семейство Wingding.
:before selector позволяет перед каждым выбранным элементом вставлять какой-то контент. Например, следующая строка вставляет строку «Note: » перед содержимым каждого P-элемента, если в составе названия его класса есть значение «note»:
p.note:before { content: «Note: » }

А content rule – это как раз тот контент, который можно вставить с помощью :before и :after селекторов.

«За и «Против» использования шрифтов в качестве иконок

За:

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

2. Одна иконка – множество размеров. Так как шрифты основаны на векторной графике, то от изменения размера их качество отображения не меняется. Так что можно не загружать одни и те же иконки в размерах icon_8×8.png, icon_16×16.png, icon_24×24.png.

3. Более «чистая» система управления иконками. Множество иконок разных размеров и цветов может стать настоящей головной болью. Если использовать в качестве иконок шрифты, то вся система упраления будет заключена в одном CSS-файле.

4. Трансформации с помощью CSS3 открывают интересные возможности (немного подробнее для примера – ниже).

Против:

1. Шрифт может тяжело весить. Сложный шрифт запросто может вытянуть на 90Kb. Не совсем удобно, если собираешься использовать как иконку всего лишь один символ.

2. Потенциальный тэговый взрыв. Поиграв с @font-face-иконками я понял, что неправильное их использование может привести к уродливой маркировке.

3. Невозможно сделать иконки многоцветными. Максимум, что можно сделать с помощью CSS3, это добиться градиентов. Но, конечно, сложные иконки с тенями и бликами – это не тот случай.

Имплементация

Простой CSS-код:


@font-face {
  font-family: 'IconicStroke';
    src: url("iconic_stroke.eot");
    src: local('IconicStroke'),
       url("iconic_stroke.svg#iconic") format('svg'),
       url("iconic_stroke.otf") format('opentype');
}

Я применяю класс iconic, чтобы включить иконку в то место, куда захочу, ставлю отображение inline-block, чтобы применить трансформации CSS3.


.iconic {
  display:inline-block;
  font-family: "IconicStroke";
}

Наконец, применяю правило content, чтобы вставить иконку:


.iconic.home:before {
  content: '!';
}

В HTML я использовал тэг a для отображения иконки, так как она в определенных случаях может быть якорем для ссылок. Тэг может быть не пустым.


<a name='home' class='iconic home'></a> Home

Использование CSS3 с шрифтовыми иконками

В исходнике этой статьи (ссылка наверху страницы) можно посмотреть также пример использования данного метода вместе с CSS3.
Проведите мышью над заголовком:
Roll over this text to see transition
И увидите результат.
Код для имплементации такой звездочки, никаких ява-скриптов:


.iconic {
	display:inline-block;
	font-family: "IconicStroke";
	text-shadow: 0px 0px 2px rgba(0,0,0,.33);
	-webkit-transform: rotate(0deg) scale(1);
	-moz-transform: rotate(0deg);
	-webkit-mask-image: -webkit-gradient(linear,
		left top,
		left bottom,
		from(rgba(0,0,0,.5)),
		to(rgba(0,0,0,1)));
	-webkit-transition: all .3s ease-in-out;
	cursor: default;
	padding:10px 0 10px 10px;
 }

.iconic:hover {
	-webkit-transform: rotate(-10deg) scale(1.3);
	-moz-transform: rotate(-10deg) scale(1.3);
	text-shadow: 0px 0px 4px rgba(0,0,0,.5);
	color:#c00 !important;
}

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: