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

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

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

Опции

TimurR

Topic Starter сообщение

16.1.2015, 23:27; Ответить: TimurR

Сообщение #1

Старожил

Группа: Active User
Сообщений: 1166
Регистрация: 6.11.2014
Поблагодарили: 3 раза
Репутация:

274

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

Это бесплатный набор шрифтообразных иконок (боже, как я их только не называю :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.1.2015, 13:55

Ответить с цитированием данного сообщения

Info-Mans Info-Mans 16.1.2015, 23:30; Сообщений: 1241 Поблагодарили: 0 раз Репутация: 125 Просмотр профиля	16.1.2015, 23:30; Ответить: Info-Mans Сообщение #2
Старожил Группа: User Сообщений: 1241 Регистрация: 20.10.2014 Из: Москва Поблагодарили: 0 раз Репутация: 125	Хорошая статья, возьму себе на вооружение. Весь список иконок пригодится

TimurR

Topic Starter сообщение

16.1.2015, 23:34; Ответить: TimurR

Сообщение #3

Старожил

Группа: Active User
Сообщений: 1166
Регистрация: 6.11.2014
Поблагодарили: 3 раза
Репутация:

274

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Вывод на монетизацию канала в Яндекс Дзен, набор 7000 дочиток быстро и безопасно!	20	WildWeb8	5370	6.4.2020, 13:48 автор: WildWeb8
CPA сеть admitad.com \| Официальный топик Часть 2	105	Antony_ADmitAD	27728	17.3.2020, 10:59 автор: r0mZet
Набор в команду(Работа онлайн)	0	Ambassador2020	1389	28.12.2019, 18:33 автор: -ambassador-
Приватная фарма-партнерка. Ограниченный набор партнеров.	1	Alexdp	2629	12.11.2019, 12:36 автор: Sergey_rx
admitad.com \| партнерская сеть - часть 2 Официальный топик партнерской сети admitad.com	92	Antony_ADmitAD	48961	4.3.2019, 14:45 автор: admitad_official

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 19.4.2024, 22:42

Дизайн