ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Шрифт значков Genericons на вашем сайте

.

genericonsШрифт значков Genericons на вашем сайте

Всем привет! Продолжаю радовать вас свежими и полезными статьями о веб-мастеринге.

Практически на всех современных сайтах есть иконки и прочие значки, но во многих случаях для них используются файлы изображений, что не очень рационально. Кроме того не всегда эти картинки имеют одинаковый стиль, что иногда немного портит общий вид страниц. Гораздо удобнее и рациональнее вместо файлов изображений использовать шрифты значков. В этой заметке мы познакомимся с одним замечательным шрифтом значков Genericons.

 

Преимущества шрифтов значков (иконок)

  • Шрифты значков отлично масштабируются. Вам не придется беспокоиться о качестве отображаемых значков (иконок) и тем более о размерах файлов изображений, когда понадобится увеличить или уменьшить их размер.
  • Шрифты значков легко дополнить эффектами через CSS. Вам не нужно применять графический редактор, чтобы изменить к примеру цвет или добавить тень к значкам. Кроме того, всего несколькими строчками в CSS вы сможете добавить прозрачность, градиенты и повороты в трехмерном пространстве для значков (иконок). В общем сможете делать с ними все то, что можно делать с обычными шрифтами.
  • Отличная поддержка браузерами. Так как Genericons ничто иное как шрифт, то вам не придется беспокоиться о качестве его отображения как в новых, так и в старых версиях браузеров.
  • Файл шрифта значков малого размера. Кроме того, что файлы шрифтов значков имеют малый размер, для их загрузки на страницу потребуется всего лишь один HTTP запрос.

 

genericons1Использование шрифта Genericons

Genericons — это отличный, изящный шрифт значков, созданный командой AUTOMATTIC и основателями WordPress. На данный момент этот шрифт содержит более 120 значков, и время от времени он совершенствуется и дополняется новыми. Кроме того, он абсолютно бесплатен и выпускается под лицензией GPL, поэтому вы можете использовать его в любых ваших проектах с открытым исходным кодом и с подобными GPL лицензиями.

Добавляем шрифт Genericons в тему WordPress

Для того, чтобы добавить этот шрифт в свою тему для WordPress, нужно выполнить всего лишь несколько простых шагов:

  1. Скачать файл в ZIP-архиве, кликнув по кнопке «Download» на сайте Genericons.com
  2. Извлечь из архива каталог «font» и закачать его в корневую директорию вашей темы.
  3. Скопировать содержимое файла genericons.css (из ZIP-архива) и добавить его в файлstyle.css вашей темы. Если вы на первом шаге изменяли целевой путь (каталог) шрифта, то вам придется внести соответствующие изменения и в CSS файл. Это важно, иначе стили не будут работать для подключаемого шрифта значков.

Это собственно и все. Теперь вы уже сможете использовать подключенные значки в вашем коде, например так:

Если вам захочется, чтобы значок отображался как отдельный элемент, то нужно использовать тег <i>

Не забывайте, что в тегах должно быть два CSS класса: genericon и genericon-{имя-значка}. Перечень всех имен значков вы можете посмотреть в файле genericons.css, где они все разбиты по категориям. Вы также можете узнать точное имя любого значка, открыв сайт Genericons.com  и кликнув по любому значку, вверху страницы увидеть его точное имя.

Использование плагина Genericon’d

Если вам не хочется добавлять шрифт значков в тему WordPress (особенно, если у вас используется много тем), вы можете воспользоваться плагином  Genericons,D.

Его применение почти не отличается от примеров, приведенных выше, только в теги нужно добавлять еще класс genericond. Вот пример:

или

Но как более простой, удобный и короткий вариант, можно применять шорткод:

Заметьте, что при использовании шорткода (shortcode) нужно подставлять лишь имя значка.

Заключение

В последнее время шрифты значков используются очень часто вместо картинок (файлов изображений), и основание для этого довольно весомое: их несложно внедрять и применять, они совместимы со старыми и новыми версиями браузеров, легко масштабируются, причем без потери качества, к ним можно применять дополнительные эффекты за счет CSS и в конце концов размер файлов со шрифтами значков довольно небольшой.

На этом все дорогие друзья!

БЕРЕГИТЕ СЕБЯ!!!




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *