Практически на всех современных сайтах есть иконки и прочие значки, но во многих случаях для них используются файлы изображений, что не очень рационально. Кроме того не всегда эти картинки имеют одинаковый стиль, что иногда немного портит общий вид страниц. Гораздо удобнее и рациональнее вместо файлов изображений использовать шрифты значков. В этой заметке мы познакомимся с одним замечательным шрифтом значков Genericons.
Преимущества шрифтов значков (иконок)
- Шрифты значков отлично масштабируются. Вам не придется беспокоиться о качестве отображаемых значков (иконок) и тем более о размерах файлов изображений, когда понадобится увеличить или уменьшить их размер.
- Шрифты значков легко дополнить эффектами через CSS. Вам не нужно применять графический редактор, чтобы изменить к примеру цвет или добавить тень к значкам. Кроме того, всего несколькими строчками в CSS вы сможете добавить прозрачность, градиенты и повороты в трехмерном пространстве для значков (иконок). В общем сможете делать с ними все то, что можно делать с обычными шрифтами.
- Отличная поддержка браузерами. Так как Genericons ничто иное как шрифт, то вам не придется беспокоиться о качестве его отображения как в новых, так и в старых версиях браузеров.
- Файл шрифта значков малого размера. Кроме того, что файлы шрифтов значков имеют малый размер, для их загрузки на страницу потребуется всего лишь один HTTP запрос.
Использование шрифта Genericons
Genericons — это отличный, изящный шрифт значков, созданный командой Automattic и основателями WordPress. На данный момент этот шрифт содержит более 120 значков, и время от времени он совершенствуется и дополняется новыми. Кроме того, он абсолютно бесплатен и выпускается под лицензией GPL, поэтому вы можете использовать его в любых ваших проектах с открытым исходным кодом и с подобными GPL лицензиями.
Добавляем шрифт Genericons в тему WordPress
Для того, чтобы добавить этот шрифт в свою тему для WordPress, нужно выполнить всего лишь несколько простых шагов:
- Скачать файл в ZIP-архиве, кликнув по кнопке «Download» на сайте Genericons.
- Извлечь из архива каталог «font» и закачать его в корневую директорию вашей темы.
- Скопировать содержимое файла
genericons.css(из ZIP-архива) и добавить его в файлstyle.cssвашей темы. Если вы на первом шаге изменяли целевой путь (каталог) шрифта, то вам придется внести соответствующие изменения и в CSS файл. Это важно, иначе стили не будут работать для подключаемого шрифта значков.
Это собственно и все. Теперь вы уже сможете использовать подключенные значки в вашем коде, например так:
У этой ссылки значок WordPress!
Если вам захочется, чтобы значок отображался как отдельный элемент, то нужно использовать тег
У этой ссылки тоже значок WordPress!
Не забывайте, что в тегах должно быть два CSS класса: genericon и genericon-{имя-значка}. Перечень всех имен значков вы можете посмотреть в файле genericons.css, где они все разбиты по категориям. Вы также можете узнать точное имя любого значка, открыв сайт genericons.com и кликнув по любому значку, вверху страницы увидеть его точное имя.
Использование плагина Genericon’d
Если вам не хочется добавлять шрифт значков в тему WordPress (особенно, если у вас используется много тем), вы можете воспользоваться плагином Genericon’d.
Его применение почти не отличается от примеров, приведенных выше, только в теги нужно добавлять еще класс genericond. Вот пример:
Ссылка со значком WordPress.
или
Эта ссылка тоже со значком WordPress.
Но как более простой, удобный и короткий вариант, можно применять шорткод:
[genericon icon=wordpress] И эта ссылка также со значком WordPress.
Заметьте, что при использовании шорткода (shortcode) нужно подставлять лишь имя значка.
Заключение
В последнее время шрифты значков используются очень часто вместо картинок (файлов изображений), и основание для этого довольно весомое: их несложно внедрять и применять, они совместимы со старыми и новыми версиями браузеров, легко масштабируются, причем без потери качества, к ним можно применять дополнительные эффекты за счет CSS и в конце концов размер файлов со шрифтами значков довольно небольшой.
Я даже никогда не задумывалась об этом. Но идея шикарная!
Правда, у меня на блоге ссылки на соц сети — это встроенный виджет, так что там менять не очень хочется.
Значки из шрифта можно как обычные текстовые символы и внутри текстов использовать, типа буквиц и тому подобного, меняя их цвет, размер, тени и прочее :)
Благодарю за полезную информацию.
Я так понимаю это также положительно повлияет на скорость загрузки сайта, т.е. она увеличится?
Скажите у вас на блоге это реализовано?
У меня пока не применялся этот шрифт, ведь сам с ним познакомился недавно.
А на скорость загрузки страниц конечно же повлияет в лучшую сторону, если размер файла шрифта и CSS будут весить меньше, чем суммарно все взятые иконки и графические значки.
Мало того, этим (или ему подобным) шрифтом можно «приукрасить» вид страниц, и при этом не подгружая во все места разные файлы картинок и прочих значков.
Спасибо!
При наличии свободного времени попробую реализовать у себя на сайте размещение значков Genericons.
Владимир, думаю стоило все-таки прямо в тексте этой статьи использовать пару-тройку :) таких значков. Я вот тоже глазами искала, как же это выглядит на практике. Редкий новичок решится пробовать на своем сайте, предварительно не увидев на чужом.
Спасибо. Можно еще вопрос — если плагин или может как то добавить выбор размера шрифта при создании новой записи, страницы. Пробовал искать не нашел..
Данил, что-то не совсем понятно, что вы имели ввиду.
Если вопрос касается шрифта значков, то нет проблем — можно для изменения их размера, цвета и т.д. использовать дополнительные стили, например так:
либо объявить в CSS новый класс, например такой:
.gplus-icon:before { content: '\f206'; color: blue; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 64px/1 'Genericons'; vertical-align: middle; }и использовать его в коде страницы для вывода значка:
Важно!
Часть класса стиля
content: '\f206';— это обязательная часть, содержащая в моем примере код значка GooglePlus.Вообще-то в скачанном архиве Genericons есть примеры и советы по использованию этого шрифта, а также коды всех значков.
Испробую на днях это, а то если начну сейчас то опять лягу спать в 4 часа ночи.
Интересно, интересно… Еще бы придумать, в каких случаях я смогу применить эти самые значки на своем блоге! Пока идей почти нет. А для буквицы я просто изменяю свойства нужной буквы через
Но сама задумка стоящая!
Великолепно, сегодня же приступлю к смене картинок на шрифты на своих сайтах… Самому мне даже в голову это не приходило. Спасибо, полезный пост.
Статья познавательна.Конечно картинку гораздо проще загрузить — нужна лишь «программка» для обработки — здесь же еще надо потрудиться.Но зато оригинальность будет обеспечена.
Очень интересная информация. Я и не знала, что такое можно на сайт добавлять. Спасибо, будем пробовать.
Периодически приходится пользоваться подобными шрифтами, однако с Genericons еще не работала. Посмотрите также «Font Awesome» и «Glyphicons», в них тоже есть много полезных для дизайна значков.
Никогда не понимал шрифты из символов… вот он момент, когда я понял!!!!
Сейчас очень моден плоский дизайн в связи с iOS7. Поэтому такие иконки будут очень кстати многим дизайнерам!
Блин, так это же совсем круто. Использовать просто и места не занимает как картинки.
Очень интересное решение, а то нам пришлось рисовать картинки-кнопки на свой сайт. Шрифт только для WordPress?
Шрифт подходит практически для любого сайта.
Удобно и практично.
Но, проблема, если шрифт не загрузится. Даже для стандартных шрифтов существует замена, прописанная в CSS.
Если используется больше 10 значков, то применение шрифта целесообразно.
Использую Font-Awesome(не сочтите за рекламу), у них сразу же есть набор стилей и неплохая поддержка на сайте с примерами всех возможных иконок.
Также могу порекомендовать шрифт http://fortawesome.github.io/Font-Awesome/ Довольно много иконок, часто обновляется, лицензия терпимая — в общем красота.
Если у кого (не дай бог) сайт на бутстрапе (http://getbootstrap.com/), то там есть встроенный шрифт (не помню названия)
Прикольная штука, я так понял, что это грубо говоря спрайты просто уже готовый набор?:)Т.е. есть огромная картинка со значками, у каждого из них своя позиция и свой класс. Так или я заблуждаюсь?)
Макс, почти угадали — это набор векторных иконок встроенных в WebFont-формат.
С приходом CSS3 и HTML5 пропала заморочка с тенями и скруглениями. С переходом на Flat стиль вообще дизайнерам и верстальщикам стало проще. А тут еще и иконки стали в шрифты заливать — вообще халява =) Вспомнил время — когда большие картинки резали на части и вставляли в таблицы =) Сейчас наоборот объединяют в спрайты. Но не стоит забывать, что у данного метода тоже есть недостатки, о которых в статье почему-то не сказали ни слова.
Влад, о каких недостатках речь? Можете привести примеры?
Где-то на Хабре была подобная статья с плюсами и минусами, после которой я тоже решил пересмотреть свое отношение к подключаемым шрифтам и начать ими пользоваться. Недостатки не столь значимые, но все же есть — монохромность, сглаживание, неоправданно большой вес в случае использования всего для пары иконок, не всегда браузером нормально подгружаются шрифты и зачастую вместо них прямоугольники, ну и при копировании контента тоже будут прямоугольники или пробелы.
Однако очень важное преимущество все же есть — на всех платформах, т.е. на Windows, Linux и прочих системах при грамотном дизайне и корректном кодировании абсолютно идентичный дизайн получится при использовании таких шрифтов. Ну и конечно же совсем не оправданно для пары иконок подгружать десятки лишних килобайт. В общем, как и в жизни — каждому свое, главное найти верное и уместное применение таким шрифтам, да и вообще всем прочим «изяществам».
А вот за эту статью громадный плюс. Иконочный шрифт никогда не применял, но за частую нуждался в этом. Попробуем на досуге ;) А и да, спс автору=) Мне нравится.
Обычно использую графические иконки. Текстовые символы — очень интересная тема, но не всегда она работает так как хочется — часто отображается некорректно.
Отображается некорректно только потому, что на страницах некорректно используются стили (CSS) и нарушены правила форматирования HTML. Нередко это происходит именно тогда, когда HTML код полностью или в большей степени формируется средствами скриптов. Бывает конечно и из-за «кроворукости» разработчиков некоторых браузеров, которым наплевать на стандарты.