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

Содержание
  1. Как подключить и использовать иконки Font Awesome 5
  2. Как подключить Font Awesome
  3. Подключение с помощью CDN
  4. Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)
  5. Как использовать Font Awesome
  6. Как использовать Font Awesome в HTML
  7. Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.
  8. Как использовать шрифт Font Awesome в Photoshop
  9. Стилизация иконок FontAwesome
  10. Как подключить шрифт Awesome у себя на сайте
  11. Как установить шрифт Awesome на сайт
  12. Альтернативный способ подключения шрифтов Awesome
  13. Как использовать шрифты awesome на сайте
  14. Пример использования шрифтов Awesome
  15. Где посмотреть иконки Awesome для сайта
  16. Какую версию шрифтов Awesome лучше использовать на сайте
  17. Благодарности
  18. Добавление иконочных шрифтов на сайт Joomla
  19. Что такое «иконка»?
  20. Проблемы использования иконок
  21. Иконочные шрифты (Icon Fonts).
  22. Иконочные шрифты. Где взять? Готовые наборы шрифтов
  23. Иконочные шрифты. Где взять? Генераторы шрифтов
  24. Иконочные шрифты. Как подключить в Joomla?
  25. Иконочные шрифты. Как использовать в Joomla?

Как подключить и использовать иконки 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 изображены настройки, которые я использую.

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

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

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

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

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

Скриншот №2

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

Скриншот №3

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

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

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

Скриншот №4

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

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

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

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

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

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

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

Скриншот №5

Как использовать 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:

Скриншот №6

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

Скриншот №7

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

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

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

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

Источник

Как подключить шрифт 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. Поэтому я, как правило, использую первый способ.

READ  Как подключить караоке к телевизору через флешку

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

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

Пример использования шрифтов 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.

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

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

Источник

Добавление иконочных шрифтов на сайт Joomla

Несколько лет назад я писал статью Добавление иконок пунктам меню Joomla. Простой и хороший способы. Тогда мы рассматривали возможности вставки иконок на сайт под управлением Joomla c помощью простых изображений и спрайтов. Каждый из способов имел свои достоинства и недостатки. Тогда я назвал эти способы «Простой» и «Хороший». В этой статье я расскажу про «Отличный» способ добавления иконок на сайт, который позволит существенно сократить время загрузки страниц с иконками, а также даст вам над ними тотальный контроль.

Что такое «иконка»?

Давайте вспомним, что вообще такое «иконка». Это маленькое изображение, которое украшает сайт и делает некоторые часто употребляемые элементы, например, кнопки или ссылки меню, нагляднее. Примеры иконок вы можете видеть на сайте wedal.ru в горизонтальном и вертикальном меню:

Проблемы использования иконок

Какие проблемы были при использовании иконок?

CSS-спрайты (если вы не знакомы со спрайтами, прочитайте в первую очередь эту статью):

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

Несколько лет назад технология CSS-спрайтов была актуальной, но сегодня существует гораздо более удобный способ создания иконок, который мы рассмотрим далее.

Иконочные шрифты (Icon Fonts).

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

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

Имеются у данного подхода и недостатки, но они несущественны:

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

Иконочные шрифты. Где взять? Готовые наборы шрифтов

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

Одним словом, есть, где разгуляться =).

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

READ  Как подключить интернет с другого компьютера через локальную сеть

Также хочу заметить, что если вы используете у себя на сайте CSS-фреймвок Bootstrap, по которому на сайте есть серия уроков Создание адаптивного шаблона Joomla с использованием Bootstrap, то в нем уже есть готовый набор иконок. Посмотреть их можно здесь. А если ко всему прочему вы используете еще и шаблон MasterBootstrap, то в его настройках сможете подключить на сайт Font Awesome, активировав всего одну опцию.

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

Иконочные шрифты. Где взять? Генераторы шрифтов

Но что делать, если все-таки хочется взять иконки из разных наборов или у сайта есть дизайн, в котором все иконки прорисованы? Здесь нам помогут онлайн-генераторы иконочных шрифтов.

Генераторы позволяют делать три вещи:

Вот несколько бесплатных генераторов иконочных шрифтов:

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

После генерации сервис позволяет скачать вам архив с готовым иконочным шрифтом, а также готовыми CSS-стилями для подключения каждой иконки.

Иконочные шрифты. Как подключить в Joomla?

Чтобы подключить к вашему сайту на Joomla иконочный шрифт, нужно:

Этот код подключит заданный css-файл к шаблону.

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

На этом всё. Проверить подключен ли CSS-файл шрифта к шаблону можно так:

Также советую проверить правильность указания пути в CSS-файле шрифта. Обычно путь указан как:

Иконочные шрифты. Как использовать в Joomla?

Использовать иконку, которая вводится на странице как буква, несомненно, круто. Но еще круче, когда никакую букву вводить не нужно в принципе. Современные иконочные шрифты используют CSS-псевдокласс :before и CSS-стиль content. Не вдаваясь в технические детали, их суть сводится к тому, чтобы показать в html-теге с заданным классом какое-то содержимое, которое указано только в CSS-файле, но не указано в html. К примеру, если у нас есть пустой div на странице, у которого есть какой-то CSS-класс, то мы можем только лишь средствами CSS поместить в него символ. Вы можете посмотреть, как это работает, выделив с помощью Firebug или другого веб-инспектора, любую иконку на wedal.ru.

Таким образом, используя технику, описанную выше, можно показывать иконку лишь добавлением к необходимому html-тегу соответствующего CSS-класса. Каждая коллекция иконок содержит описание этих классов. Посмотрим на Font Awesome. На странице icons представлен список всех иконок с подписями, каждая из которых является уникальным CSS-классом, который данную иконку вызывает:

Если кликнуть по любой из иконок, откроется отдельная страница, на которой указан полный html-код вставки иконки, например:

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

Если вы подключили шрифт правильно, то добавление пустого html-тега с заданным CSS-классом иконки приведет к появлению в нем на странице заданной иконки.

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

Источник

Поделиться с друзьями
Как подключить и установить...
Adblock
detector