Перейти к содержимому


Выбрать шаблон и создать сайт

FontAwesome: набор шрифтов в форме иконок. Часть 1

#1 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180
0

Отправлено 16 Январь 2015 - 22:27

Привет, ранее я уже писал статью об использования подобного набора иконок в виде шрифтов встроенных в WordPress (вот ссылка на статью). Минус их в том, что их мало и они встроены в WordPress. То есть использовать их в другой CMS или собственном самописном движке будет малость проблематично. Да и в данном случае овчинка выделки не стоит, так как есть множество аналогов, распространяемых бесплатно. И об одном из таких шрифтов мы сегодня поговорим и пощупаем его на практике. Встречайте FontAwesome!

 

BootStrap-FontAwesomeBanner.png

 

 

 

 

 

 

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

 

Как использовать в вебе? Немного документации. Чтобы вставить иконку в веб документ, нам нужно скачать некоторые файлы и поместить их на хостинг, потом подключить стили в теге <head>:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Либо, подключить шрифты сразу с CDN (грубо говоря сервер, на котором хостится этот файл стилей, но лучше почитать подробнее). Теперь, когда стили подключены, файлы скопированы на хостинг, мы можем вставить иконки первым способом при помощи элемента <i> с заданием ему определенных классов. В FontAwesome каждая иконка соответствуем своему классу, с если задать ее элементу <i>, то она отобразиться. Второй способ подразумевает использование псевдоэлементов CSS :after и/или :before и тут все немного иначе. Теперь попрактикуемся и подключим иконки, скажем к горизонтальному меню, которое мы верстали в этой теме

 

Откроем файл index.html и в теге <head> после указания кодировки документа подключим файл стилей прямиком с CDN:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Если этот вариант не заработал, скачайте FontAwesome по этой ссылке и распакуйте в папку css на своем сервере файл font-awesome.min и скопируйте целиком папку fonts в ту же директорию, в которой лежит папка css. Далее подключите этот файл первым способом. Обратите внимание, что пути при локальном подключении нужно изменить на свои.  По идее, теперь иконки мы подключили, чтобы проверить это, добавьте в html документе следующее:

<i class="fa fa-soccer-ball-o"></i>

У вас должен отобразиться футбольный мяч. Если отобразился все хорошо. Во второй части статьи мы уже попробуем вставить их в пункты горизонтального меню упомянутого выше, а также попробуем их использовать в кнопках. 


 

 

Сообщение отредактировал TimurR: 17 Январь 2015 - 12:55

  • 1

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#2 Info-Mans

Info-Mans
  • Пользователь
  • 1 176 сообщений
  • Репутация: 111

Отправлено 16 Январь 2015 - 22:30

Хорошая статья, возьму себе на вооружение. Весь список иконок пригодится
  • 0

»»» Начни изменять свою жизнь с внешнего вида «««
        Буду рад вашим комментариям на блоге!



#3 TimurR

TimurR
    Topic Starter
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 16 Январь 2015 - 22:34

Info-Mans, впереди еще пара статей. В принципе, использование очень простое, документация отличная, но попробую для новичков разжевать и привести примеры IRL :)  


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.




Оформление форума – IPBSkins.ru