Здравствуйте, дорогие читатели. Если вы решились создать сайт, то первая ваша задача – это создать будущий макет сайта и разработать его дизайн. Сейчас, новым стандартом в web-дизайне является так называемый — плоский стиль или flat design. Плоский стиль в сочетании с кросс-платформенным дизайном (Adaptive Web Design), который дает возможность сайту корректно отображаться на различных устройствах, задает актуальный вектор развития web-дизайна.

В погоне за стилем

Уже прошло то время, когда в сайт пихали все что нужно и не нужно, дабы показать какой крутой у меня сайт. А пихали практически все, градиенты, огромные тени, объемные иконки, гигантские шапки (header), flash-анимации, от чего сайт, в свою очередь, страдал перенасыщенностью и сложностью восприятия информации. С приходом в 2010 году Windows 8 и ее интерфейсом Metro, все изменилось, причем в обратном направлении. Где была перенасыщенность – теперь чувствуется атмосфера простоты, где были объемные иконки – теперь преобладает плоскость. Собственно об адаптивных иконках для сайта я и хочу сегодня поговорить.

Что такое Fontello

Вот представьте себе, что вам на сайте нужно отображать, скажем 25-30 иконок. Часть из них будут кнопки социальных сетей, половина информативного характера и остальное, например, навигационный интерфейс. А теперь представьте что вам нужно их всех подогнать по стилю, размеру, оформлению и т.д. Кроме того, к каждой иконке надо прописать свой url на сервере, что порой составляет из себя дополнительные трудности. Плюс ко всему такие иконки нагружают сервер, так как каждая создает отдельный запрос на сервер (решается путем css-спрайтов, но это тоже не выход). Также, при масштабировании сайта, иконки будут терять свое качество отображения. На лицо одни проблемы, как для дизайнера, так и для верстальщика.

Тут нам на помощь приходят иконочные шрифты. Это обычные шрифты, только в место символов (a,b,c,d и т.д.) они содержат в себе иконки. Тут вы спросите — и что мне теперь придется вместо картинок создавать шрифт? НЕТ! Все уже создано и нарисовано давным давно, пользуйтесь на здоровье. Один из сервисов который предоставляет нам иконочные шрифты – это Fontello.

Как пользоваться иконочным шрифтом Fontello, иконки fontello, иконки на сайт

Как пользоваться шрифтовыми иконками Fontello

Использовать такие иконки на своих сайтах достаточно легко и удобно. Поехали!

Выбор иконок и загрузка на сайт

  1. Заходим на сайт Fontello.com. На вкладке Select Icons вы увидите большой выбор иконок.
  2. Выбирайте те иконки, которые вы хотите использовать (также можете добавить свои путем перетаскивания иконки или шрифта в под категорию – Custom Icons) в своем проекте и нажимайте на кнопку Download webfont, после чего распакуйте скачанный архив у себя на компьютере.
  3. В архиве вы увидите следующее:
    Fontello архив файлов, структура папок
  4. Если у вас WordPress, то заливаем все файлы из папки css на FTP в папку — /ваша_тема/css. Из папки font на FTP в папку — /ваша_тема/font (если папки нет, создаем).

Подключаем и используем наши иконки

1) Для начала убедимся что в файле fontello.css верно прописаны пути к шрифтам (если у вас Bootstap то папка с шрифтами может называться – fonts)

fontello папки, fontello архив
2) Между тегами <head></head> — пишем строчку:

3) Используем иконки:

Где название класса тега <li> обозначает название конкретной выбранной вами иконки. Все название вы можете подсмотреть в файле demo.html

Это конец первой части. В следующей статье я расскажу о том, как модифицировать иконки, менять их стиль, размеры, цвета, добавлять новые в набор, а также о альтернативных сервисах шрифтовых иконок. Не пропустите!

В этом месте статья заканчивается. Оставляйте комментарии ниже. Добавляйте статью в социальные закладки, чтобы не потерять. Спасибо за то что Вы с нами!


Оцените пожалуйста материал:
(9 голосов, оценка: 3,56 из 5)
Загрузка...


Оставьте пожалуйста ваш комментарий :

comments powered by HyperComments