Иконочные шрифты или как подключить font awesome

ПоделитьсяTweetПоделитьсяGoogle

Что такое иконочные шрифты — шрифты которые браузер отображает как иконку. Достаточно указать в HTML документе код иконки и браузер отобразит что-то типа картинки.

Довольно-таки удобная вещь, для любого вебмастера или слесаря)), который набивает себе руку на WORK-ZILLA

Пока набьёш руку, набьют морду!

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

А ну попробуй наскрести штук 10 в гугл картинках или яндекс …

Вот и начинаешь борьбу с Photoshop-ом. Вот для этих целей, в помощь вебслесарю, и были придуманы такие шрифты, как иконочные или font awesome (удивительный шрифт)

Иконочные шрифты удобны ещё и тем, что отображаются во всех браузерах, размер не меняет качества, уменьшая или увеличивая такую иконку (пр. 16 х 16px; 48 x 48px) качество рисунка остаётся на уровне.

ЧИТАТЬ:  Яндекс поиск на сайт.

Чтобы отобразить иконку нужно прописать её значение в документе, для этого необходимо разместить код иконки внутри элемента span или в   i

Далее,  присвоить им два класса: fa плюс второй класс, который должен соответствовать названию иконки, например fa-male.

Как подключить font awesome

Затем подключить библиотеку иконочных шрифтов к вашему документу из CDN вот такой строчкой

Если вы делаете тяжёлый Лендинг, много скриптов, чтобы загрузка была быстрее, выгружаем библиотеку font awesom в папку Ленда.

То есть, чтобы иконки прогружались из корневой папки ленда или сайта. Для этого скачиваем архив библиотеки font awesome отсюда>>

распаковываем архив, папку библиотеки закидываем на хост или оставляем в корневой папке Лендинга и прописываем путь к ней через min.css

Затем, если вы редактировали Лендинг у себя на компе в Дримвивер, забрасываем на хост весь чемодан с вещами

Выбрать иконки и взять их код можно здесь>>

Господа зарабатывайте потихоньку на бирже фрилансеров

Work-zilla.com

в свободное от основной работы время.

Всем удачи!

ПоделитьсяTweetПоделитьсяGoogle