Font Awesome


Содержание

Украшаем дизайн сайта с помощью иконок Font Awesome

Сегодня новая статья из рубрики «Дизайн».

Кто следит за моим блогом знают, что пару дней назад я обновил дизайн блога. Так вот, все иконки, которые вы видите напротив пунктов меню и рубрик, а также в некоторых заголовках, например, во вкладках между переключением популярных и обсуждаемых записей, возле заголовка похожих статей в конце текста и возле заголовка количества комментариев, это все не картинки, а специальный шрифт Font Awesome, с помощью которого можно без проблем делать хорошие качественные иконки.

Тоже самое касается и маленьких иконок возле количества комментариев, даты, количества просмотров.

И в большинстве случаев это сделать намного проще, чем каждый раз прописывать стили и выводить картинку. Также не приходится прописывать дополнительные стили по выравниванию, цвету и так далее, так как иконки выводятся шрифтом и совпадают с общими стилями того блока, куда их разместили.

В общем, штука очень крутая. Я когда делал свои первые заказы, столкнулся с этими иконками и мне они доставили очень много неудобств. Я просто не знал, как ими пользоваться, и в некоторых случаях просто заменял эти иконки на изображения. Сейчас же я не вижу в их использовании абсолютно никаких проблем. Достаточно подключить шрифт Font Awesome к сайту, а затем в нужное место добавить код вывода иконки. Очень просто, давайте рассмотрим на практике.

Как подключить иконки Font Awesome к сайту

Существует 2 способа подключения:

  1. Подключить библиотеку иконок с самого сервиса, т.е. прописать путь к файлу иконок на стороне облачного хранилища, где сервис его хранит. В этом случае каждый раз при загрузке страницы будет грузиться и данный файл. Изначально у меня стоял такой вариант, но потом я заметил, что он достаточно сильно замедляет загрузку страниц. Именно поэтому я перешел на второй вариант.
  2. Скачать файл иконок Font Awesome с официального сайта и подключить его в шаблон, как и обычный файл стилей. Работа сайта становится заметно быстрее.

Рассмотрим оба варианта более подробно.

Вариант 1

Заходим на официальный сайт Font Awesome и берем строку кода подключения загрузки файла с облачного хранилища. Строка будет в первом пункте страницы, также ее я продублировал ниже.

Как подключить и использовать иконки Font Awesome 5

Доброго времени суток, читатели моего блога! Мне постоянно поступает масса вопросов по шрифту Font Awesome – «Как подключить Font Awesome?», «Как его использовать на сайте или в Photoshop?», «Почему отображаются вместо иконок квадратики?» и тому подобные. И я решил сделать подробное руководство по Font Awesome 5, в котором вы найдете ответы на все эти вопросы.

Как подключить Font Awesome

В этой главе мы подробно разберемся как подключить Font Awesome 5 всеми возможными способами. И какой из них лучше выбрать.

Подключение с помощью CDN

Чтобы подключить иконочный шрифт Font Awesome 5 с помощью CDN необходимо перейти на страницу: Font Awesome Start и выставить необходимые параметры. Полученный код вставляем в тег вашего сайта, на тех страницах где вы собираетесь использовать иконки.

На скриншоте №1 изображены настройки, которые я использую.

  1. Выбираем версию, которая нам нужна. Free — бесплатная версия. Pro — платная и имеет дополнительные стили и наборы иконок.
  2. Начертание шрифта, которое мы будем использовать в своем проекте.
  3. Что мы будем использовать. Webfont — иконочный шрифт. SVG — иконки в формате .svg
  4. Сгенерированный код для подключения Font Awesome с помощью CDN.

Чтобы не переходить на сайт, я размещу код со стандартными настройками здесь.

Подключить Font Awesome с помощью CDN очень просто. Ведь вам нужно разместить всего лишь одну строчку кода в свой проект и все будет работать. Файлы будут храниться на сервере разработчиков. Но я предпочитаю хранить все на своем хостинге, так как я точно могу быть уверен, что все будет работать корректно и никакие изменения и обновления со стороны разработчика шрифта не затронут мой проект.

Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)

Для начала нужно скачать файлы Font Awesome и разместить их на свой хостинг. Для этого переходим по этой ссылке https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself или скачиваем по прямой ссылке.

После скачивания получаем архив с файлами, как на скриншоте №2:

Для работы иконочного шрифта необходимы только папки выделенные красным. И то в паке /CSS нам нужен только один файл css/all.min.css (Смотрите скриншот №3)

Файл all.min.css хранит все стили шрифта Font Awesome, я использую именно этот файл. На это есть много причин связанные с моим личным удобством. Вы же можете использовать тот файл, стили которого вы будете использовать. Например, если вы хотите использовать только бесплатный иконочный шрифт, достаточно подключить файл fontawesome.min.css.

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

Переносим папку webfont и файл all.min.css на свой хостинг.

Очень важно! Папка webfont нужно располагать на директорию выше чем файл all.min.css, иначе шрифт Font Awesome не подключится, так как в стилях прописан именно такой путь для файлов со шрифтами. Если такой способ противоречит структуре вашего проекта, тогда просто пропишите в файле all.min.css новый путь до папки webfont.

У меня это выглядит так:

В папке fontawesome хранится один файл all.min.css

Теперь нам нужно подключить Font Awesome к своему сайту, для этого подключаем стили all.min.css, так как вы обычно подключаете файлы со стилями. Этот процесс я описывать не буду, так как он имеет огромное количество вариантов и каждый делает это по-своему. Но если вы новичок и не знаете, как подключать файлы со стилями, то Google вам в помощь. При возникновении трудностей пишите в комментариях, и я обязательно вам помогу.

Как использовать Font Awesome


В этой части статьи мы разберем как правильно использовать Font Awesome в веб-разработке или дизайне на примере Photoshop.

Как использовать Font Awesome в HTML

Это самый простой способ использования иконочного шрифта. Достаточно выбрать из каталога иконок Font Awesome нужную иконку и вставить ее код в нужное место вашего html документа. На скриншоте № 5 под цифрой 1 изображено место откуда можно узнать код иконки.

Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.

Чтобы использовать иконочный шрифт для его отображение в псевдоэлементах after или before, нужно использовать Unicode иконки. Который можно взять на странице с нужной иконкой (на скриншоте №5 цифра 2)

Теперь пишем стили css для элемента before или after:

Разберем главные моменты в коде.

3. В свойстве content указываем Unicode.

4. Обязательно задаем семейства шрифта. Обратите внимание у Font Awesome 5 используется 2 шрифта «Font Awesome 5 Brands» и «Font Awesome 5 Free». В избежании ошибки указывайте оба.

5. Font-weight — обязательно нужно указывать 900, иначе иконки будут отображаться в виде квадратиков. Другая толщина доступна только в PRO версии.

Как использовать шрифт Font Awesome в Photoshop

Для того, чтобы использовать иконочный шрифт в фотошопе необходимо установить шрифт на свой компьютер. Они находятся в папке webfont в архиве Font Awesome. Для установки нужно кликнуть правой кнопкой мыши на нужный шрифт и нажать «Установить».

Смотрите на скриншоте №6:

После установки можно использовать Font Awesome в фотошопе, для этого мы копируем необходимую нам иконку с каталога (цифра 3 на скриншоте №5) и вставляем в photoshop как текст. Незабываем выбрать в настройках семейство шрифта Font Awesome.

Стилизация иконок FontAwesome

Для стилизации иконок используются стандартные стили CSS для шрифтов. Например, чтобы поменять цвет иконки нужно использовать свойство CSS color, а поменять размер иконок Font Awesome нужно использовать свойство font-size.

Вот и вся информация, которая необходима для использования иконок от Font Awesome, как для разработки сайтов, так и для проектирования дизайн-макетов в Photoshop. Надеюсь статья вам понравилась и решила все ваши проблемы. А если нет, посмотрите мое видео на эту тему, там я показываю все на примере.

Илон Маск рекомендует:  Что такое код cpdf_rotate

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

Font Awesome 4 как подключить?

11.02.2020

Как подключить Font Awesome v 4.7.0 ?

Иконический шрифт и CSS инструментарий. Font Awesome предоставляет собой масштабируемые векторные иконки, которые можно мгновенно настраивать — размер, цвет, тень и все, что можно сделать с помощью CSS. Как подключить Font Awesome к сайту? да очень просто.

font awesome как подключить к сайту к проекту CSS

Один шрифт, — 675 иконок в одной коллекции. Font Awesome является пиктографическим языком действий.

Для работы Font Awesome не требуется JavaScript.

Как добавить в проект иконочный шрифт Font Awesome v4.7.0:

Если у Вас шрифты находятся не рядом с файлом: font-awesome.css
Тогда в файле font-awesome.css нужно указать путь до шрифтов.

Как использовать FontAwesome в CSS?

Для того что бы воспользоваться FontAwesome через CSS:

FontAwesome и ещё 25 бесплатных иконочных шрифтов

����‍�� Премиум-темы для Вордпресс с русскоговорящей поддержкой

На днях WPLift опубликовал большую подборку иконочных шрифтов (или шрифтовых иконок?) Не смог пройти мимо и хочу поделиться этой прекрасной коллекцией с читателями. Заодно покажу каким образом эти шрифты подключаются к Вордпресс.

Что такое иконочный шрифт

Иконочный шрифт — это обычный шрифт, у которого вместо привычных букв и цифр разные символы, пиктограммы, глифы. Такие шрифты часто подключают к сайтам и используют символы в качестве иконок.

В чем плюсы


  • Масштабирование без потери качества, это же обычный текст по-сути.
  • Простая стилизация, как обычного текста.
  • Поддержка всеми браузерами, включая очень старые.
  • Относительно малый вес.

В чем минусы

  • Нельзя измененять геометрию иконок.
  • Нельзя использовать несколько цветов внутри одной иконки.

Если это критично, значит лучше сразу перейти на формат SVG и не мучиться.

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

Зачем это нужно

Существуют исследования, которые доказывают, что использование иконок повышает юзабилити сайта, упрощает взаимодействие пользователя с интерфейсом сайта. Грамотно подобранные и уместно размещённые иконки — это всегда стильно, красиво и удобно.

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

1. Font Awesome

Лидер среди иконочных шрифтов, включает в себя более 675 различных иконок. Изначально был разработан для Bootstrap, но прекрасно работает с любыми другими фреймворками.

2. Dashicons

Этот набор известен всем пользователям Вордпресс, именно Dashicons используются в оформлении админпанели платформы.

3. Themify Icons

Набор из 320+ иконок от известной компании Themify. Бесплатный для личного и коммерческого использования.

4. Foundation Icon Fonts 3

Набор из 283 иконок со скругленными углами.

5. Elegant Icon Font

Бесплатный набор из 360 иконок различных направлений от Elegant Themes.

6. Dripicons

Набор стильных иконок.

7. Pictonic

Бесплатный набор из 266 иконок разной направленности, регистрация в сервисе открывает доступ к тысячам других иконок.

8. Sosa

Бесплатный набор из 160 иконок широкого спектра применения от Ten by Twenty.

9. Metrize Icons

Коллекция из 300 бесплатных иконок в Metro-стиле.

10. Ionicons

Прекрасный набор иконок, можно подключить прямо из MaxCDN.

11. Symbol Signs

Специфический набор из 50 символов.

12. Icomoon

Большой бесплатный набор из 490 векторных иконок.

13. Batch


Пакет из 343 интересных иконок от Адама Уиткрофта.

14. Socialico

Набор из 74 иконок социальных сетей.

15. Raphaël Icon-set

Интересный набор иконок с привязкой к буквам.

16. Entypo

Бесплатный набор из 411 премиум-иконок, имеется дополнение иконок социальных сетей.

17. MFG Labs Icon Set

Набор уникальных иконок от MFG Labs, разработанных для собственных нужд и впоследствии переданных в свободный доступ.

18. Ligature Symbols

Бесплатный набор иконок.

19. PW Drawn Icon Font

80 бесплатных иконок, выполненных в очень интересном стиле, который сильно отличается от остальных.

20. Fontelico

Маленький набор из 30 забавных иконок.

21. Feather Icon Set

Набор модных иконок в стиле минимализма.

22. Premium Pixels

Набор из 80 иконок.

23. Rondo Social Icon Font

Небольшой набор круглых иконок социальных сетей.

24. Map Icons

Отличный набор иконок для отображения географических объектов на картах Google Maps, например.

25. Weather Icons

222 погодные иконки способны отобразить любое состояние погоды.

26. Typicons

Универсальный набор из 336 шрифтовых иконок разных направлений.

Как подключить иконочный шрифт к Вордпресс

1. Плагины

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

Отмечу наиболее известные:

2. Без плагинов

Любители хендмейда могут без сторонних плагинов загрузить в свою тему любой шрифт и зарегистрировать шорткод, который будет выводить иконки. Покажу на примере Font Awesome.

Все операции производятся в файле functions.php активной темы или в специальном функциональном плагине.

Подключение шрифта


Загружаем с MaxCDN актуальную на данный момент версию Font Awesome 4.7.0

Регистрация шорткода

Теперь в редакторе можно использовать шорткод [icon] с двумя переменными type и size, которые задают тип и размер иконки.

Пример использования шорткода

В результате должен генерироваться такой HTML-код

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

Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.

Подпишитесь на рассылку
Один раз в месяц все новые материалы в одном письме

200 бесплатных наборов кистей для Фотошопа
516

Как в Фотошопе сменить русский язык на английский
187

Как быстро наполнить сайт на WordPress с помощью плагина WP All Import
166

25 лучших шаблонов для создания интернет-магазина на OpenCart
160

Как открыть *.CDR в Adobe Illustrator
136

5 лучших книг по Вордпресс на русском языке
135

Как быстро удалить все исходящие заявки в друзья во Вконтакте
125

10 рекомендуемых книг-бестселлеров по PHP
117

Как отправить большое видео в Ватсап
108

20 лучших шаблонов Вордпресс для сферы услуг
100

Как импортировать большую базу данных MySQL в обход ограничений phpMyAdmin
99

Как скачать приватное видео из фейсбука
91

Установка временнОй зоны в PHP
86

Как использовать Media Query в JavaScript
85

20 лучших Вордпресс шаблонов для образовательных сайтов
81

Как включить мультисайт и создать сеть сайтов на Вордпресс
74

Подключаем цели Яндекс Метрики к WordPress Contact Form 7
62

Как проверить сайт на технические ошибки онлайн
61

10 бесплатных шаблонов лендингов в PSD
57

20 лучших шаблонов Вордпресс для веб-студий и маркетинговых агентств
56

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

Как подключить шрифт Awesome у себя на сайте

Awesome — это набор векторных иконок. А точнее шрифт состоящий не из букв и цифр, а из картинок. И эти изображения, так как они по сути являются шрифтом, можно оформлять (модифицировать) с помощью CSS стилей, устанавливать для них цвет, размер, тень и многое другое. Что согласитесь очень удобно.

В настоящий момент шрифт Awesome содержит более 1500 бесплатных иконок!

Как установить шрифт Awesome на сайт

Для того чтобы воспользоваться иконками шрифта Awesome нужно скачать набор шрифтов и стилей себе на сайт. Для этого переходим на официальный сайт — https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself и скачиваем архив, нажав на кнопку [Font Awesome Free for the Web].

Далее вам необходимо распаковать архив и скопировать к себе на сайт содержимое папок /css и /webfonts, например в директорию /css/awesome.


Теперь подключите в секции вашего сайта стили Awesome:

Альтернативный способ подключения шрифтов Awesome

Можно ничего не копировать к себе на сайт, а загружать все данные из CDN сети. Для этого нужно добавить следующий код в раздел :

Плюсом такого решения будет более быстрая скорость работы сайта, так как данные будут параллельно грузиться с разных серверов (сайт — с вашего хостинга, а шрифты — из сети Awesome), кроме того шрифты уже могут быть закешированы браузером, если вы когда-то посещали сайты на которых они используются.

Минус — это невозможность использования на автономных сайтах (без доступа к интернету) и зависимость от CDN сети Awesome. Поэтому я, как правило, использую первый способ.

Как использовать шрифты awesome на сайте

После того как вы подключили шрифты у себя на сайте вы можете добавить иконки Awesome на веб-страницу двумя способами:

  1. задать соответствующие классы для элементов и ;
  2. добавить к нужному элементу с помощью псевдоэлементов :before, :after и соответствующего значения свойства content.

Пример использования шрифтов Awesome

Для одного из сайтов я использовал следующий код (для элемента использованы стили шрифта awesome версии 4.7.0):

В браузере результат выглядит так:

Где посмотреть иконки Awesome для сайта

Если буквы и цифры у вас нанесены на клавиши клавиатуры и их использование не вызывает затруднений, то вот по шрифтам awesome есть вопрос: а как узнать соответствие кода иконки и его графического изображения. Например, какой использовать HTML код для отображения иконки Android?

Например, изображению Android соответствует следующий код:

На экране он выглядит так:

Какую версию шрифтов Awesome лучше использовать на сайте

Шрифт Awesome постоянно развивается, в него регулярно добавляются новые иконки и варианты их оформления. На момент написания статьи актуальна 5 версия шрифта. Но вы спокойно можете использовать у себя на сайте предыдущие редакции 4.7.0 или даже 3.2.1. Для этого посетите страницы https://fontawesome.com/v4.7.0/ и https://fontawesome.com/v3.2.1/ соответственно.

Обратите внимание, что при скачивании предыдущей версии шрифта вас будут постоянно склонять к использованию новой версии ��

На своих сайтах я обычно использую шрифт awesome версии 4.7.0. Причина в том, что он занимает меньше места. Правда в этой версии заметно скромнее набор иконок, в частности отсутствует упомянутая выше иконка Android, которая появилась лишь в версии 5.0.

Благодарности

При написании статьи были использованы следующие источники:

Font Awesome

Видео: Font Awesome

CSS код и примеры использования этого шрифта-иконок «Font Awesome». Ниже Вы видите сам CSS код и таблицу с примерами классов, содержимого (content:»») и результат.

Шрифты-иконки Font Awesome

Добавьте css файл шрифта, который необходим (в зависимости от версии).
Если структура Вашего сайта (приложения) имеет другую файловую структуру (файлы лежат в других папках), то измените все пути на свои пути (например: /assets/css/).
Если Вы не понимаете о чем идет речь, перейдите на эту страницу. Затем нажмите сочетания клавиш Ctrl+U или правой кнопкой мыши на пустом месте страницы > Исходный код страницы / Исходный текст страницы (как-то так должно быть написано в контекстном меню).
Например, подключить шрифт FA можно так:

Данным кодом ↑ будет подключена максимальная версия шрифта со всеми иконками

Также закиньте в эту папку папку из архива
Добавьте такой код на страницу или в CSS файл, чтобы можно было легко использовать шрифт FA ( , А НЕ )

Как использовать шрифты-иконки?

Например, Вы можете использовать импорт CSS кода. Скачайте и разместите у себя на сервере файлы шрифта. Затем подключите их в любой из подключенных к нужной странице CSS файл. Код подключения доступен выше. После этого, Вы сможете писать следующий код, например:

Как видите, все очень просто. Именно поэтому мы создали данную страницу, чтобы Вы смогли увидеть сразу CSS код, html код и готовый результат, чтобы не использовать дополнительное ПО. Если Вы не хотите подгружать весь CSS код, то можете использовать лишь импорт шрифта и создавать свои классы.

Font awesome: добавляем свои иконки

На сегодняшний день в сети полно различных «иконочных» шрифтов, при помощи которых можно легко добавлять иконки на своих сайтах.
Навигация по статье:

Что такое Font Awesome


Font Awesome — шрифт и CSS-инструментарий, предназначенный для размещения множества векторных, легко настраиваемых иконок на своих сайтах.

Таблица иконок Font Awesome

Все, что можно настраивать при помощи CSS — можно применить к иконкам Font Awesome на Ваших проектах. Одним из важнейших преимуществ этих шрифтов — четкое и красивое отображение при различных размерах. Если обычная png-иконка с прозрачным фоном или еще хуже jpg-иконка при увеличении будет выглядеть не очень красиво (появятся эффекты размытия, нечеткость), то иконка в виде шрифта сохранит идеальное качество. Вместе с этим, как в любом шрифте заранее предопределен список символов, так и в Font Awesome заранее предопределен список готовых, отобранных из наиболее часто нужных иконок.

Способы добавления своих иконок

Каждый день сервис Font Awesome принимает десятки запросов от пользователей и компаний на добавление своих иконок в библиотеку сервиса. Существует несколько факторов, которые влияют на положительное решение сервиса о добавлении новых иконок. Одним из основных является частота запросов, проще говоря — популярность. Но если даже ваша предложенная иконка идеально подходит по всем факторам и нужна всем, увидеть ее в общей библиотеке не удастся. Как минимум нужно будет ждать выхода обновления Font Awesome. А иконка, как правило нужно уже сейчас, для этого есть несколько способов. Ниже представлены наиболее подходящие из них.

Сложный способ редактирования Font Awesome

  1. Форкните репозиторий Font Awesome. Вам понадобится правильно настроенная среда разработки.
  2. Хакните файл с шрифтом FontAwesome.otf. Вы можете использовать эту инструкцию: создание Octicons (на английском).
  3. Поделитесь своей веткой с сообществом Font Awesome. Проверьте наличие открытых проблем, связанных с вашей веткой, и поделитесь своим репозиторием.

Простой способ внесения изменений в Font Awesome

Существует несколько онлайн сервисов, позволяющих кастомизировать Font Awesome. Вот наиболее популярные:

  • Fort Awesome: https://fortawesome.com/ (от @davegandy, создатель Font Awesome) — Платный сервис, от создателя Font Awesome, пробный период — 14 дней.
  • Fontello: http://fontello.com/ — Бесплатный сервис, удобный если вам нужно один раз изменить набор своих иконок.
  • IcoMoon: http://icomoon.io/app/#/select — Онлайн сервис, который представляет много различных возможностей с редактированием и добавлением иконок. Бесплатный.
  • Fontastic: http://fontastic.me/ — Еще один сервис, есть возможность генерации svg спрайтов, есть регистрация и управление вашими шрифтами. Бесплатный.

Вы можете использовать любой из предложенных, это быстро и просто. Лично я рекомендую IcoMooon. Последнее время пользуюсь именно им и в этой статье я опишу как использовать IcoMoon детальнее.

Добавление иконок через Icomoon

IconMon — онлайн сервис для создания собственных шрифтов из иконок для использования на сайтах или в мобильных и дектопных приложениях. Допустим у вас подключен Font Awesome, а вам нужно добавить иконки из других шрифтов или вообще свою собственную иконку с вашим логотипом. Для этого вы создаете новый проект в IconMon, импортируете в него Font Awesome шрифт, если нужно то другие шрифты или свои иконки в виде шрифтов/svg картинок. Затем вы скачиваете получившийся шрифт и используете в своем приложении вместо Font Awesome. Ниже я покажу как это делать пошагово.

IconMon: начало работы

  • Заходим на сайт сервиса iconmon.io и жмем кнопку IcoMoon App
  • При запуске IconMon вы попадете на экран управления проектом. В нем по дефолту уже будет список бесплатных иконок, которые нам предлагает IconMon. Так как наша задача была в том,
    чтобы обновить шрифт Font Awesome, то первое что мы сделаем — это импортируем его в IcoMoon.
  1. Жмем кнопку Import Icons (в верхнем левом углу) и выбираем файл fontawesome-webfont.svg из папки шрифтов, которую вы использовали ранее.
  2. Отлично. После того, как мы добавили Font Awesome, загрузим и свою собственную иконку в svg формате тем же способом (Import Icons).
  3. Теперь все необходимые иконки и наборы иконок загружены в систему мы можем по необходимости их немного исправить или просто изменить. Для этого в верхнем меню управления переключите режим с «Select» на «Edit» и выберите иконку в таблице иконок. При редактировании можно выполнять следующие операции: Разворот/Отражение иконки (Rotate), Масштабирование (Scale), Выравнивание (Align), Цвет (Color).
  4. После редактирования (если оно было необходимо) и загрузки нужных иконок в IconMon нам нужно отметить те, которые будут в нашем новом шрифте. Для этого в верхнем меню выбираем (если не выбрано) Select и отмечаем нужные иконки. Также Вы можете выбрать сразу весь набор. У нас есть загруженный набор Font Awesome — справа от заголовка набора нажимаем на кнопку управления и выбираем Select All. Не забываем отметить нашу собственную иконку.
  5. В нижнем правом углу экрана нажимаем Generate Font. После нажатия мы попадем на экран просмотра шрифта, который мы создали. На этом экране можно указать или исправить названия иконок. Также обратите внимание, на дополнительные опции рядом с кнопкой Download. В этих опциях можно указать название, различную мета-информацию и указать способ, которым иконки будут вставляться у вас на сайте. Также можно указать версию шрифта.
  6. Убедившись, что все нужные правки созданы, нажимаем на кнопку Download и скачиваем новый шрифт.

Публикация готового сета иконок Iconmoon на сайте

Скачав архив вы можете подключить его на своем сайте вместо Font Awesome и использовать иконки уже из этого набора, включая вашу собственную иконку. Для подключения на сайте нам понадобятся файлы из папки fonts и style.css — заливаем их к себе на сайт (при необходимости style.css можно переименовать или вообще добавить контент из него в свой css файл, который был использован на сайте ранее). Обратите внимание, что разместив font и css у себя на сайте относительный путь к шрифтам в css файле мог изменится. По этому откройте уже загруженный на ваш сайт css код и убедитесь, что к шрифтам прописаны верные пути. Вот тут я красным выделил место, где нужно проверить пути.

@font-face <
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?29mi8v’);
src: url(‘fonts/icomoon.eot?29mi8v#iefix’) format(’embedded-opentype’),
url(‘fonts/icomoon.ttf?29mi8v’) format(‘truetype’),
url(‘fonts/icomoon.woff?29mi8v’) format(‘woff’),
url(‘fonts/icomoon.svg?29mi8v#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;

После успешного переноса файлов iconmon на сайты использовать иконки можно таким образом:

Как обновлять ваш сет с иконками в будущем

Итак, мы успешно создали, подключили и используем свой кастомизированый шрифт Iconmon, в которому у нас и свои иконки и Font Awesome и любые другие. Мы хорошо поработали при генерации этого шрифта, долго прописывали названия к иконкам, выставляли цвета, вертели их редактировали. А теперь у нас появилась еще одна новая иконка и мы хотим ее добавить в этот наш шрифт. Iconmon предлагает 3 варианта решения этой задачи:

  1. Хранение ваших проектов в облаке Iconmon — это платная услуга. При регистрации в Iconmon можно выбрать подписку, оплатить ее и ваши проекты шрифтов будут храниться в вашем аккаунте. Вы всегда сможете изменить их, поставить версию выше, скачать и использовать.
  2. Если вы не чистили кэш браузера, то ваши проекты также останутся при повторном заходе на IconMon и вы сможете легко добавить новую дополнительную иконку в ваш проект и сохранить себе обновленный шрифт. Главная проблема в том, что после того, как вы почистите кеш в браузере, все это будет удалено.
  3. Настройки проекта в файле selection.json — наиболее подходящий вариант для нас. Во-первых — это бесплатно. Этот файл вы скачиваете в архиве со шрифтом каждый раз, когда генерируете его.
    Просто храните этот файл и в будущем можно будет заходить на IconMo и импортировать ваши проекты через него.


Заключение

Возможно есть и более удобные способы добавления своих иконок в Font Awesome, но они или платные или требуют более глубоких технических знаний. Этот же способ с использованием IconMon — прост, бесплатен и достаточно удобен. Если у вас появились какие-нибудь сложности, то добро пожаловать в комментарии. С радостью помогу.

Font Awesome

Version 5 – the iconic SVG, font, and CSS framework

The internet’s most popular icon toolkit has been redesigned and built from scratch. On top of this, features like icon font ligatures, an SVG framework, official NPM packages for popular frontend libraries like React, and access to a new CDN.

Not familiar with Font Awesome 5? Learn more about our successful Kickstarter and plan. You can also order Font Awesome Pro which includes tons more icons directly from fontawesome.com.

Learn how to get started with Font Awesome and then dive deeper into other and advanced topics:

Using Font Awesome on the Web

Advanced Options & Techniques

Using Font Awesome on the Desktop

Where did Font Awesome 4 (or 3) go?

Now that Font Awesome 5 has been released we are marking version 4 as end-of-life. We don’t plan on releasing any further versions of the 4.x or 3.x.

The Git repository for v4.7.0 and v3.2.1 can be found in our GitHub releases.

We’ll keep track of each release in the CHANGELOG.md

Looking for older versions of Font Awesome? Check the releases.

From time-to-time we’ll have special upgrading instructions from one version to the next.

Check out the UPGRADING.md guide when you upgrade your dependencies.

Code of conduct

We will behave ourselves if you behave yourselves. For more details see our CODE_OF_CONDUCT.md.

Please read through our contributing guidelines. Included are directions for opening issues.

Font Awesome will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:

For more information on SemVer, please visit http://semver.org.

The major version «5» is part of an umbrella release. It includes many different types of files and technologies. Therefore we deviate from normal SemVer in the following ways:

  • Any release may update the design, look-and-feel, or branding of an existing icon
  • We will never intentionally release a patch version update that breaks backward compatibility
  • A minor release may include backward-incompatible changes but we will write clear upgrading instructions in UPGRADING.md
  • A minor or patch release will never remove icons
  • Bug fixes will be addressed as patch releases unless they include backward incompatibility then they will be minor releases

Font Awesome Free is free, open source, and GPL friendly. You can use it for commercial projects, open source projects, or really almost whatever you want.

  • Icons — CC BY 4.0 License
    • In the Font Awesome Free download, the CC BY 4.0 license applies to all icons packaged as .svg and .js files types.
  • Fonts — SIL OFL 1.1 License
    • In the Font Awesome Free download, the SIL OLF license applies to all icons packaged as web and desktop font files.
  • Code — MIT License
    • In the Font Awesome Free download, the MIT license applies to all non-font and non-icon files.

Attribution is required by MIT, SIL OLF, and CC BY licenses. Downloaded Font Awesome Free files already contain embedded comments with sufficient attribution, so you shouldn’t need to do anything additional when using these files normally.


We’ve kept attribution comments terse, so we ask that you do not actively work to remove them from files, especially code. They’re a great way for folks to learn about Font Awesome.

Font Awesome

Font Awesome — это набор масштабируемых векторных иконок. Основной плюс и удобство этого набора — возможность лёгкой персонализации. Любой иконке Вы можете задать свой размер, цвет, тени и все, что делается силами CSS. К тому же это абсолютно бесплатно. Сборка иконок версии Font Awesome 4.5.0 состоит из 605 иконок!

Как установить FontAwesome?

СПОСОБ 1

Для установки на ваш сайт набора иконок Font Awesome нужно выполнить несколько несложных шагов:

  • Скачать дистрибутив с сайта fontawesome.io. Версия 4.5.0 весит 538 Кб.
  • Распаковать архив и скопировать папку «font-awesome-4.5.0», например, в корень вашего сайта, туда где лежит файл index.
  • Подключить файлы в Вашего сайта. Перед закрывающимся тегом поместить строчку: . Не забудьте изменить путь, если скопировали папку с шрифтами в другое место.

На этом установка пакета иконок Font Awesome закончена.

СПОСОБ 2

Способ подходит для платформы WordPress и для тех кто не хочет занимать лишнее место на своём FTP. Скопируйте функцию в свой файл functions.php (Админка WP — Внешний вид — Редактор). Сохраняем изменения и можно пользоваться.

function font_awesome() <
if (!is_admin()) <
wp_register_style(‘font-awesome’, ‘http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css’);
wp_enqueue_style(‘font-awesome’);
>
>
add_action(‘wp_enqueue_scripts’, ‘font_awesome’);

Как пользоваться FontAwesome?

Для вставки иконки на сайт идём сайт fontawesome.ru/all-icons/, выбираем нужную иконку и копируем её тег . Например, для иконки anchor тег > «fa fa-anchor» > . Вставляем тег в нужное место и получаем:

Изменяем размер font awesome icons

Для изменения размера пользуемся одним из дополнительных тегов: fa-5x, fa-4x, fa-3x, fa-2x, fa-lg. Например:

fa-lg fa-2x fa-3x fa-4x fa-5x

Поворачиваем font awesome icons
Чтобы повернуть иконку как и в случае с размером добавляем к основному тегу:

Группировка иконок font awesome
Для наложения одной иконки на другую создаем родительский класс fa-stack, класс fa-stack-1x используем для стандартного размера иконки, а класс fa-stack-2x для увеличенного.

Как изменить цвет у иконки font awesome
Для того чтобы изменить цвет иконки можно дописать внутри тега свойство style. Либо положить иконку в один из тегов: ,

Если вы хотите сделать из иконки ссылку, то просто поместите её в тег .

Пожалуй все самые основные моменты при использовании иконок от Font Awesome я описал. Если остались вопросы — задавайте их в комментариях.

Шрифт Font Awesome: Подключение на WordPress и применение

Дизайн сайта строится на многих вещах: цвет, оформление, стиль и, конечно же, веб-иконки. Они одушевляют неодушевленное, то есть если взять пустой графический квадрат, то он небогат смыслом, а если к нему добавить веб–иконку, к примеру, конверт, то это уже будет указатель со значением. В просторах интернета можно найти сотни сайтов с исходниками иконок или специальные сервисы с поиском веб – иконок.

Но, помимо всего прочего, есть возможность добыть иконки другим путем, о чем сейчас и пойдет речь. Имеется в виду шрифт Font Awesome – это Клондайк веб-иконок численность, которых, свыше 450 шт. Плюсом является не только количество, но и удобство в применении. А также еще можно подчеркнуть векторное значение, что при изменении размера иконки, качество не портится.

Подключаем шрифт Font Awesome на WordPress

Процедура довольно стандартная и устанавливается буквально в пару шагов. Первым делом скачиваем шрифт Font Awesome с сайта разработчиков . В скаченном файле вы обнаружите ZIP архив. Извлекаем из архива содержимое, в нем находится папка с названием шрифта и актуальной на данный момент версией. В основной папке имеются еще подпапки: стили, шрифты и т.д.

Вторым действием является непосредственно загрузка шрифта Font Awesome на хостинг. Подключитесь к сайту через любой FTP – клиент и закиньте ранее скаченную папку в установленную вами тему.

Последнее что осталось сделать — это подключить стили. Одна из подпапок носит название «CSS» в нем находится два файла: font-awesome.css, font-awesome.min.css они одинаковые, разница лишь в форматировании. В этих файлах заданы все нужные стили и импорт шрифта. Вот почему необходимо подключить один из них. Откройте файл header.php и между тегами подключите стили.

Главное, укажите относительный путь, если меняете название папок, то не забываем менять и в подключении стилей.

Способ №2

А можно пойти совсем простым путем и подключить шрифт Font Awesome не загружая себе на сайт, а импортировать напрямую (подключение CDN). Для этого в файле functions.php вставьте следующий код:

Чтобы не возникло ошибки вставляйте код в конце перед знаком ?> .

Примеры использования шрифта Font Awesome

После подключения шрифта на WordPress становятся доступны все его возможности. Как упоминалось выше насчет количества иконок, то с полным каталогом можете ознакомиться по ссылке . При нажатии на одну из иконок вы увидите соответствующий ее класс для применения.

HTML

CSS

Для оформления иконки используйте ее класс как показано в примере и смело меняйте цвет, размер расположение и т.д.

Есть еще одна особенность. Ведь не всегда удобно добавлять иконку так, как показано выше, через тег . Можно использовать Unicode добавляя основному классу псевдоэлемент и выводить иконку через content: «»; .

HTML

CSS

Обратите внимание на две первые строчки в классе с псевдоэлементом ( .e1:before ). В первой задается Unicode, а во второй название шрифта. Это нужно чтобы элемент не присвоил шрифт от своего родителя. Полный список Unicode находится по ссылке . Просто копируйте иконку и вставляйте между кавычками в content: «»; .

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL