<
  • Главная
Статьи

іконочние шрифти

  1. переваги
  2. fontello.com
  3. З fontello можна:

іконочние шрифти

-

це шрифти, кожен символ якого представлений іконкою.

Іконочние шрифти останнім часом набрали більшу популярність в сучасних веб-сайтах, нижче ми розповімо чому.

До появи іконочние шрифтів дизайнери і верстальники робили сайти з використанням растрових іконок. Це було красиво, але досить незручно. Сучасний Інтернет змінюється і на місце растрових іконок прийшли векторні іконки, виконані у вигляді шрифтів.

Сучасний Інтернет змінюється і на місце растрових іконок прийшли векторні іконки, виконані у вигляді шрифтів

Принцип роботи таких шрифтів простий, до web сторінці, за допомогою CSS стилів, підключається додатковий файл шрифту. Веб-майстер в стилях сайту вказує властивості іконок (розмір, колір, тінь та інші) і в розмітці сторінки пише спеціальні теги, на місці яких і з'являються іконки.

Розглянемо плюси і мінуси використання іконочние шрифтів:

переваги

  • безліч вже готових наборів іконок із загальною стилістикою;
  • зручний пошук іконка дають самі автори наборів;
  • іконочние шрифти однаково чітко відображаються на всіх екранах пристроїв, навіть retina;
  • спростився процес роботи верстальника при складанні HTML верстки макету;
  • іконки вантажаться у вигляді одного файлу шрифту, стало простіше і вигідніше використовувати CDN;
  • можна вибрати колір іконки і її розмір;
  • можна маніпулювати фоном іконки, наприклад виставити колір або залити зображенням;
  • можна змінювати CSS стилі іконки при наведенні користувачем мишкою на іконку, тобто додати більше інтерактивності;
  • до іконки можна застосувати сучасні CSS3 стилі, такі як тіні, трансформації та анімація.

недоліки

  • дизайнеру важче змінити зовнішній вигляд іконки, так як потрібні додаткові знання векторної графіки і відповідних програмних пакетів;
  • після зміни іконки, необхідно збирати набір іконок в файли шрифту і конвертувати в різні формати, що без навичок і відповідного ПЗ зробити проблематично (частково можна вирішити за допомогою fontello.com);
  • вантажиться весь набір іконок, навіть якщо ви використовуєте на сторінці всього кілька (вирішується за допомогою fontello.com).

висновки

Порівнявши плюси і мінуси іконочние шрифтів видно, що перші з лишком перекривають другі. Із серйозних недоліків можна виділити тільки один - дизайнеру важче працювати з іконочние шрифтами, але зате скільки зручності користувачам

Якщо ви ще їх не використовуєте іконочние шрифти на своїх сайтах, то вам пора почати це робити.

fontello.com

fontello.com - цей сервіс який дозволяє об'єднувати іконки веб-шрифтів для використання у власних сайтах.

З fontello можна:

  • отримати доступ до популярних наборів іконочние шрифтів, створених професіоналами і поширюються під open source ліцензіями;
  • об'єднати символи з кількох шрифтів в один файл;
  • стиснути іконки в колекціях, що мінімізує розмір файлу шрифту.

Як працювати з fontello.com.

  • виберіть іконки, які вам подобаються;
  • додайте свої іконки якщо необхідно;
  • налаштуйте імена класів, які будуть використовуватися під час верстки;
  • налаштуйте коди символів іконок;
  • скачайте попередні налаштування.

Fontello сам генерує всі необхідні файли шрифтів і стилів, залишається тільки підключити ці файли до проекту або сайту.



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

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

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью