Как заменить иконку Font Awesome на текст с возможностю подключения к файлу перевода

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

Где посмотреть иконки 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 на вашем сайте WordPress

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

Если вы хотите добавить большую коллекцию иконок Font Awesome на ваш сайт WordPress, то читайте о двух быстрых и простых способах, как добавить их на WordPress.

Что такое Font Awesome Icons и чем они полезны?

Если вы используете тему Divi, то наверняка знакомы с шрифтовыми иконками от Elegant Icon Font, которые есть в комплекте с темой.

Font Awesome работает по такому же принципу – это шрифт, созданный из иконок. Не набором картинок. Почему это уточнение важно? Потому, что любые шрифтовые иконки, как Font Awesome и Elegant Icon Font — это:

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

На данный момент Font Awesome предлагает 675 различных иконок, которые вы можете добавить в любом месте на вашем сайте WordPress. Он также совместим с любой темой WordPress.

1. Как добавить Font Awesome на WordPress вручную

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

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

Добавление Font Awesome в хэдер темы

Первым шагом является добавление таблицы стилей Font Awesome в хэдер темы:

Этот код перенесёт таблицу стилей в Font Awesome из Bootstrap CDN. Вы также можете загрузить таблицу стилей прямо из Font Awesome . Нет никакой разницы.

Но мы не рекомендуем вставлять этот код прямиком в файл вашей темы header.php . Если ваша тема разрешает добавление кастомных скриптов в header.php из меню настроек, то лучше воспользоваться этим вариантом:

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

Вставляем иконки Font Awesome

Когда вы добавите код в вашу тему, вы будете готовы начать использовать иконки Font Awesome везде.

Найти полный список иконок можно на веб-сайте Font Awesome .

К примеру, если вы ищите иконку «Download», то просто вводите в поиск «download» и выбираете из доступных вариантов:

После выбора понравившейся иконки вы можете увидеть экран с разными размерами этой иконки. В центре экрана вы должны заметить небольшой блок кода:

Вам нужно скопировать весь код выбранной иконки. Потом, вы можете вставить этот код куда угодно в WordPress, неважно, какой редактор вы для этого используете. Просто убедитесь, что вы вставляете его, когда редактор переключен в режим «Текст»:

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

Как увеличить размер иконки Font Awesome

Как вы видите в примере сверху, иконки довольно маленькие. Если вам нужно их увеличить, то нужно добавить несколько строк кода. К примеру, чтобы увеличить размер иконок в два раза, вам нужно добавит « fa-2x » в класс иконок.

Например, вот изначальный код иконки:

А вот код с увеличенной в 2 раза иконкой:

В реальной жизни иконка будет выглядеть теперь так:

Вот список кусочков кода, которые вам нужно добавить, чтобы изменить размер:

• fa-lg – увеличить на 33%
• fa-2x – увеличить в 2 раза
• fa-3x – увеличить в 3 раза
• fa-4x – …
• fa-5x – … ну вы поняли!

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

2. Как добавить Font Awesome на WordPress с помощью плагина

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

Вы можете попробовать использовать и другие плагины, но нам кажется, что этот наилучший по нескольким причинам:

• Он регулярно обновляется. Это важно, поскольку несколько популярных плагинов Font Awesome не обновлялись годами.
• Автоматически импортирует новый набор иконок Font Awesome.
• Позволяет вам добавлять иконки через шорткод или тот же код, что мы использовали.

Для начала установите и активируйте плагин.

Он добавит новый раздел меню Настройки → Better Font Awesome в вашей консоли. Вам не нужно настраивать ничего, просто следуйте инструкциям, которые предоставит плагин:

Добавление иконок

Чтобы добавить иконки к записям, вы можете использовать тот же метод, который мы показывали вам в ручной версии, или использовать шорткод. Преимущество использования шорткода состоит в том, что вам не нужно менять вкладку «Text» в вашем редакторе.

Формат шорткода, который вам нужен:

Где NAME – это название иконки на веб-сайте Font Awesome:

Вы можете добавить этот шорткод в модуль Divi или в обычный текстовый редактор WordPress. Вот пример, где мы добавили иконку через шорткод в текстовый модуль во время использования Divi Visual Builder:

Visual Builder отображает это так:

Вы можете использовать тот же шорткод в обычном редакторе WordPress.

Если вы хотите изменить размер вашей иконки с помощью шорткода, то просто добавьте тэг класса с размером иконки:

[icon name=» NAME » >fa-2x «]

Итоги

Вот и всё! Два разных способа добавить векторные иконки Font Awesome на ваш сайт WordPress. Мы предпочитаем ручной метод, поскольку он отнимает меньше времени и потом не нужно волноваться о потенциальной поломке плагина.

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

Теперь ваша очередь! А вы используете Font Awesome?

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: 5 / 5. Количество голосов: 13

Как Подключить К Сайту Иконки Font Awesome — Шрифты

С уверенностью этот материал можно отнести к разделу «Инструменты для сайта» смотрите в верхней панели сайта, возможно найдете еще, что-нибудь интересное для себя.

Что такое font awesome — это вспомогательный инструмент (иконка), который помогает выделить определенные элементы на сайте или блоге.

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

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

Правда в базе Font Awesome на все случаи жизни иконок не найдется, но это пока что, ведь с каждым месяцем их количество заметно прибавляется.

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

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

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

Вот мы с вами и добрались к самой важной части. Подключить шрифты проще простого, для этого вам нужно открыть HTML редактор своего сайта и в промежутке между тегами . вставить тег, который подключит ваш сайт к базе font awesome:

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

Как добавить к нужному элементу

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

Еще можно вставить иконку возле нужного элемента при помощи CSS, но это чуть сложнее. Каждая иконка имеет свой собственный Unicode, который и используется в данном случае.

Шрифт Awesome 5 не отображает иконки

Главное меню » Информация » Шрифт Awesome 5 не отображает иконки

1. Убедитесь, что вы правильно связываетесь с Font Awesome 5 CDN в «заголовке» вашего документа

Бесплатно

ВЕБ-ШРИФТЫ И CSS

SVG & JS

Профессионал

Для этого вам понадобится Профессиональная лицензия, затем вы примените собственный домен для работы CDN.

ВЕБ-ШРИФТЫ И CSS

SVG & JS

Последние выпуски отображаются во время публикации.

2. Убедитесь, что вы вызываете правильный Font Awesome CSS и обладаете необходимыми привилегиями.

Font Awesome 5 разделен на Solid, Regular, Light, Brands, и их можно применять только на следующих уровнях:

Так, например, вы не можете отображать значки в Regular или Light, если вы используете Font Awesome Free.

3. Убедитесь, что ваш формат Unicode правильный

обратите внимание, это не то что ‘/f077′

4. Убедитесь, что у вас есть правильное семейство Font Awesome Font в вашем CSS

Если у вас есть правильный файл/привилегии (как указано выше), убедитесь, что ваш элемент покрыт правильным семейством шрифтов Awesome Font.

Бесплатно

Профессионал

Выше приведены общие семейства шрифтов для Font Awesome 5, но вы также можете вызывать определенные стили Font Awesome 5 (Solid, Regular, Light, Brands):

Бесплатно

Профессионал

Обратите внимание, что, как указано выше, стиль «Brands», похоже, не соответствует соглашению об именовании Font Awesome, и в обеих версиях Basic и Pro эти значки имеют семейство шрифтов «Font Awesome 5 Brands». Например, если вы хотите показать иконку Font Awesome на Facebook, вам следует применить стиль «Font Awesome 5 Brands»:

5. Добавьте больший вес шрифта

Интересно, что многие браузеры будут отображать пустое поле, если вы не используете Font Weight более 600, поэтому добавьте следующее в свой CSS

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Работа со шрифтом Awesome

• CSS — CSS3
• HTML — HTML5
• Flexbox CSS — уроки
• JavaScript
• Плагины и расширения
• Шпаргалки по Битрикс
• Продвижение сайтов
• Web-ДИЗАЙНЕРУ
• ЗАРАБОТОК в интернете
• Виды интернет-сайтов
• Разное

Дата публикации: 06.02.2020

Что такое Font Awesome

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

В библиотеке Font Awesome версии 4.7.0 содержится 646 иконок различных тематик, которые можно задействовать как для коммерческих проектов так и личного использования абсолютно бесплатно.

1. Как подключить шрифт Awesome

Можно выделить два способа, это использование сторонних ресурсов от куда будем подгружать файл font-awesome.css и подключать шрифты через CSS или следующий способ, это скачиваем к себе архив с шрифтом Awesome и подключаем его при помощи тега
. Далее более подробно разберем каждый из этих способов.

Способ 1

Используем сторонние сервисы CDNJS или BootstrapCDN . Размещенный на них файл font-awesome.css мы подключаем при помощи данных строк:

Для подключения с CDNJS:

Для подключения с BootstrapCDN:

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

Способ 2

Переходим на сайт Font Awesome , и скачиваем архив со шрифтом. Распаковав архив мы увидим несколько папок. Для установки шрифта нам понадобятся две папки это css и папка fonts . Закачиваем их на свой сервер где расположен сайт, если есть папки с таким названием, то просто добавляем из них содержимое. Затем подключаем файл font-awesome.css или font-awesome.min.css при помощи тега
, только теперь из папки css нашего сайта.

Используем полную версию:

Используем минимизированную версию:

2. Как работать с иконками Font Awesome

На веб-страницу иконки можно добавить двумя способами, первый способ это использовать соответствующий класс иконки и указать его для элемента или , но предварительно нужно прописать класс fa каждому из элементов.

Второй способ, добавляем иконки при помощи псевдоэлементов ::before и ::after , а так же соответствующего значения свойства content для иконки. Обязательно указываем font-family: FontAwesome иначе шрифты работать не будут.

2.1. Как увеличить иконку

Что бы увеличить размер иконки достаточно в css прописать font-size и задать параметр. Так же можно увеличить размер иконки относительно его контейнера используя определенные классы fa-lg (увеличивает на 33%), fa-2x , fa-3x , fa-4x или fa-5x .

2.2. Как фиксировать ширину иконки

Для фиксирования ширины иконки используется класс fa-fw , задав его, мы фиксируем ширину тем самым можем их использовать как для навигации так и для оформление списков.

2.3. Как маркировать списки LI иконками

Для замены стандартных маркеров в блоке

.

используются классы fa-ul и fa-li .

элемент списка элемент списка элемент списка элемент списка

2.4. Кавычки для цитат обрамленные в рамке

Что бы установить рамку для иконки используем класс fa-border , а при помощи pull-right и pull-left можем добавят кавычки для текста.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis >

2.5. Анимированные иконки

Что бы анимировать любую иконку достаточно добавить класс fa-spin для круговой анимации и для пульсирующей анимации fa-pulse . Так же можно использовать классы fa-spinner , fa-refresh , и fa-cog .

2.6. Поворачивание и отзеркаливание иконок

Для поворота иконки используется класс rotate-* в котором указываем числовое значение на какой градус иконка будет повернута. Для зеркального отображения используется два класса это fa-flip-horizontal для горизонтальное отзеркаливание и вертикального icon-flip-vertical .

2.7. Группирование иконок

Иконки можно группировать накладывая их друг на друга, тем самым комбинируя их между собой. Чтобы создать группу из иконок, задаем класс для родителя fa-stack . Можно изменять размер иконки, класс fa-stack-1x задает стандартный размер, а класс fa-stack-2x для увеличения. Так же можно увеличивать при помощи классов fa-lg , fa-2x , fa-3x , fa-4x , или fa-5x .

fa-twitter на fa-square-o fa-flag на fa-circle fa-terminal на fa-square fa-ban на fa-camera

2.8. Примеры использование иконок в Bootstrap 3

Иконки Awesome прекрасно работают в Bootstrap и это хорошо видно из данных примеров.

3. Группы иконок

В версии Font Awesome 4.7 включены новые 41 иконка. Иконки разбиты на группы для удобного отбора при помощи поиска или по навигации. У каждой иконки представлен класс и CSS код для вставки при помощи свойства content.

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. Примеры, как установить

В этой статье я максимально просто и доступно расскажу о том, что такое шрифт с иконками Font Awesome, как его установить и объясню несколько примеров применения.

Что такое шрифт Font Awesome?

Шрифт Awesome нужен для того, чтобы использовать иконки, не загружая при этом на сайт какие-либо изображения (подборки иконок и тд). Данный шрифт (в версии 4.1) включает в себя 441 иконку, которые становятся доступны при применении класса конкретной иконки для элемента. Но об этом позже. Ниже Вы можете увидеть малую часть примеров иконок:

Плюсы шрифта
— Бесплатно
— Простой доступ через CSS
— 441 иконка (в версии 4.1)
— Работает в IE
— Масштабируемость
— Отлично отображается в читалках и i-технике!
— Многие дизайнеры уже оценили и используют шрифт!

Как установить шрифт Font Awesome (с иконками)?

1. Скачиваем шрифт с сайта http://fontawesome.io/ . Весит немного, примерно 400 Кб.

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

3. Подключаем файлы в head Вашего проекта. Предлагаю два варианта — если лежит выше по директории и если в одной.

4. Используем шрифт. Смотрим пример ниже:

Примеры шрифт Font Awesome

Допустим идёт проработка каких-либо действий по списку:

Как использовать Font Awesome в css-свойстве content?

Как поставить font-awesome через before? Хочу попробовать использовать иконки Font Awesome перед ссылками (и после них)

Знаю, что нельзя использовать HTML код в content , но есть ли возможность установить туда иконку?

Решения

Для FontAwesome 5

font-family может быть Font Awesome 5 Free или Font Awesome 5 Brands;

Метод для FontAwesome ниже 5 версии, например для FontAwesome 4.7.0

Для начала, найдите подходящую иконку, затем зайдите на страницу выбранной иконки и найдите её Unicode обозначение.
Например, http://fontawesome.io/icon/snowflake-o/ имеет Unicode: f2dc .
Затем, пропишите:

Код выше применит иконку ко всем ссылкам сайта. Чтобы иметь возможность поставить иконку конкретно на определённый сайт, можно пометить класс

Чтобы иметь возможность поставить отступ между иконкой и ссылкой, можно использовать свойство display:inline-block и padding-right
Также иконке можно задать свой цвет color: #F00; , и выровнять её на один уровень с текстом vertical-align: middle;

Также, можно менять иконку при наведении курсора на неё

Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

font awesome 5 как подключить к сайту (Напрямую и CDN)

Font Awesome — это шрифтовые иконки для использования с Twitter Bootstrap

Font Awesome 5 существует в бесплатном и платном варианте, в бесплатном на данный момент времени 1109 иконок, в платном 1,877 и дополнительные возможности.
Здесь будет описано подключения бесплатного пака иконок.

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

Чтобы подключить font awesome 5 через CDN нужно вставить данные строки

Если хотим использовать SVG формат иконок.

Шрифтовые