Содержание

Как подключить и использовать Font Awesome 5. Полное руководство.

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

  • Как подключить Font Awesome
    • Подключение с помощью CDN
    • Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)
  • Как использовать Font Awesome
    • Как использовать Font Awesome в HTML
    • Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.
    • Как использовать шрифт Font Awesome в Photoshop
  • Стилизация иконок FontAwesome

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

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

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

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

Скриншот №1

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

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

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

<link rel="stylesheet" href="https://use. fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

Подключить 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.

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

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

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

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

Скриншот №4

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

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

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

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

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

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

Скриншот №5

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

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

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

div::after{ display: block; content: '\f17b'; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'; font-weight: 900; width: 100px; height: 100px; }

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

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 канал, чтобы не пропустить полезные материалы.

Bootstrap 3 — Иконки Font Awesome

Установка шрифта

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

  • Самый простой способ – это с помощью Bootstrap CDN. Для этого необходимо добавить одну строчку кода в раздел заголовка сайта. Ни чего загружать и устанавливать не надо.
    
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    
  • Второй способ заключается в скачивании шрифта Awesome со страницы проекта, его распаковки в каталог сайта и подключения CSS файла «font-awesome.min.css».
    
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    
    Готовую сборку с платформой Twitter Bootstrap 3 можете скачать по ссылке.

Использование иконок шрифта Awesome

Вы можете поместить иконки Awesome практически в любом месте, используя CSS префикс fa и имя иконки, которые расположены на сайте. Шрифт Awesome предназначен для использования со строчными элементами HTML (можно использовать тег <i> для краткости, но использование тега <span> семантически более правильно).


<i></i> fa-camera-retro

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

fa-camera-retro

Создание иконок увеличенного размера

Для увеличения размера иконок Вы можете воспользоваться классами fa-lg (увеличение на 33%), fa-2x, fa-3x, fa-4x, или fa-5x.


<i></i> fa-lg
<i></i> fa-2x
<i></i> fa-3x
<i></i> fa-4x
<i></i> fa-5x

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

Создание иконок с фиксированной шириной

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


<div>
  <a href="#"><i></i>  Главная</a>
  <a href="#"><i></i>  Книги</a>
  <a href="#"><i></i>  Статьи</a>
  <a href="#"><i></i>  Параметры</a>
</div>

Иконки для маркированных списков

С помощью классов fa-ul и fa-li Вы можете заменить стандартные маркеры в неупорядоченных списках на другие иконки.


<ul>
  <li><i></i>Иконки Awesome</li>
  <li><i></i>могут использоваться</li>
  <li><i></i>как маркеры</li>
  <li><i></i>неупорядоченных списков</li>
</ul>

  • Иконки Awesome
  • могут использоваться
  • как маркеры
  • неупорядоченных списков

Создание «вытянутых» иконок

Для создания «вытянутых» кавычек или иконок статей используйте классы fa-border и pull-right или pull-left.


<i></i>
...Креативность — это просто создание связей между вещами. Когда творческих людей спрашивают, как они что-то сделали, они чувствуют себя немного виноватыми, потому что они не сделали ничего на самом деле, а просто заметили. Это становится им понятно со временем. Они смогли связать разные кусочки своего опыта и синтезировать что-то новое. Это происходит потому, что они пережили и увидели больше, чем другие, или потому, что они больше об этом размышляют.

…Креативность — это просто создание связей между вещами. Когда творческих людей спрашивают, как они что-то сделали, они чувствуют себя немного виноватыми, потому что они не сделали ничего на самом деле, а просто заметили. Это становится им понятно со временем. Они смогли связать разные кусочки своего опыта и синтезировать что-то новое. Это происходит потому, что они пережили и увидели больше, чем другие, или потому, что они больше об этом размышляют.

Создание вращающихся иконок

Для создания вращающейся иконки используйте класс fa-spin.


<button type="button"><i></i></button>
<button type="button"><i></i></button>
<button type="button"><i></i></button>
<button type="button"><i></i></button>

Создание повернутых и зеркально отраженных иконок

Чтобы повернуть и зеркально отразить иконки, используйте следующие классы fa-rotate-* и fa-flip-*.


<i></i> иконка<br>
<i></i> иконка, повернутая на 90 градусов по часовой стрелки<br>
<i></i> иконка, повернутая на 180 градусов по часовой стрелки<br>
<i></i> иконка, повернутая на 270 градусов по часовой стрелки<br>
<i></i> иконка,отраженная по горизонтали<br>
<i></i> иконка, отраженная по вертикали

иконка
иконка, повернутая на 90 градусов по часовой стрелки
иконка, повернутая на 180 градусов по часовой стрелки
иконка, повернутая на 270 градусов по часовой стрелки
иконка,отраженная по горизонтали

иконка, отраженная по вертикали

Иконки, наложенные друг на друга

Чтобы наложить несколько иконок друг на друга, используйте класс «fa-stack» на родительском элементе, класс «fa-stack-1x» для иконки, который расположен на переднем плане и класс «fa-stack-2x» для иконки, расположенной на заднем плане. Класс «fa-inverse» может использоваться для инвертирования цвета иконки.


<span>
  <i></i>
  <i></i>
</span>
иконка "Twitter" на иконке "квадрата"<br>
<span>
  <i></i>
  <i></i>
</span>
иконка "флага" на иконке "круга"<br>
<span>
  <i></i>
  <i></i>
</span>
иконка "терминала" на иконке "квадрата"<br>
<span>
  <i></i>
  <i></i>
</span>
иконка "запрещено" на иконке "камеры"

иконка «Twitter» на иконке «квадрата»
иконка «флага» на иконке «круга»
иконка «терминала» на иконке «квадрата»
иконка «запрещено» на иконке «камеры»

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

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

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

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

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

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

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

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

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

Вариант 1

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

Вставляем ее на свой сайт между областямитут вставляем. Если у вас сайт на WordPress, то данная область находится в файле Header.php.

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

Этот код вставляем в любое место, где хотим отобразить иконку.

Замечу, что такой метод вставки не работает в названии виджетов WordPress. Если просто вставить перед фразой код иконки, то он будет пропадать оттуда. Поэтому нужно использовать другой метод с помощью Jquery, о котором я сделаю следующую статью Там тоже все очень просто.

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

Вариант 2

Скачиваем папку с файлами [urlspan]отсюда[/urlspan].

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

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

Далее нужно подключить файл font-awesome.min.css, лежащий в папке CSS. Используем следующую строку, в ней только пропишите свой путь (домен и название темы). Размещаем ее по аналогии, как и с первым вариантом — в шапку сайта.

Далее аналогичным образом ищем понравившуюся иконку и вставляем ее в нужные места шаблона.

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

Изменение цвета иконок

Если же вам необходимо изменить цвет иконок, то это также вполне реально и не составит труда. У каждой иконки имеет общий класс (.fa) и индивидуальный класс с названием иконки. На примере выше с иконкой карандаша индивидуальный класс следующий:

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

Аналогично можно прописать оформление и для всех иконок Font Awesome, если нет нужды делать каждую индивидуально. Например, получится:

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

На этом сей материал я заканчиваю. Надеюсь, что он вам будет полезен. Тема актуальная. Лично я теперь использую такие иконки на всех сайтах. Стараюсь избавляться от всех картинок, и делать все максимально чисто и просто.

А вы используете иконки и слышали ли о них? Если нужна будет помощь, то обязательно пишите свои вопросы в комментариях.

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

  • Как подключить Font Awesome
    • Подключение с помощью CDN
    • Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)
    • Как использовать Font Awesome в HTML
    • Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.
    • Как использовать шрифт Font Awesome в Photoshop

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

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

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

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

    Скриншот №1

    На скриншоте №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:

    Скриншот №2

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

    Скриншот №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.

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

    Скриншот №4

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

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

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

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

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

    Пропонуємо комплексні IT послуги та цифрові рішення:

    • IT аутсорсинг
    • WEB розробка
    • SEO просування
    • Кібербезпека
    • Веб-хостинг

    Розробляємо, просуваємо, захищаємо!

    Хто ми?

    KR. LABORATORIES — це digital-лабораторія комплексних IT рішень. Наша web-студія надає повний спектр ІТ послуг: досліджує, розробляє, оптимізує, просуває, захищає та обслуговує веб-сайти, сервери, операційні системи, програми, застосунки, додатки та іншу IT інфраструктуру. Ми застосовуємо сучасні методики, практики, рішенння, автоматизуємо бізнес-процеси, впроваджуємо цифрову трансформацію та інтегруємо новітні технології.

    Фахівці KR. Laboratories більше 8 років працюють на ринку інформаційних, телеком та веб-послуг і зарекомендували себе як надійні та перевірені фахівці і партнери. За цей час було успішно виконано близько 90% задач, розроблено більше 40 проєктів, надано технічну IT підтримку близько 200-там клієнтам та отримано десятки відгуків.

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

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

как подключить и использовать на сайте

Автор Константин Хмелев Просмотров 2.2k. Опубликовано Обновлено

Здравствуйте, друзья.

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

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

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

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

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

План статьи

  1. Как подключить иконки Font Awesome к сайту
  2. Вариант 1
  3. Вариант 2
  4. Изменение цвета иконок

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

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

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

Вариант 1

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Вставляем ее на свой сайт между областямитут вставляем. Если у вас сайт на WordPress, то данная область находится в файле Header.php.

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

Этот код вставляем в любое место, где хотим отобразить иконку.

[box style=»1″]

Замечу, что такой метод вставки не работает в названии виджетов WordPress. Если просто вставить перед фразой код иконки, то он будет пропадать оттуда. Поэтому нужно использовать другой метод с помощью Jquery, о котором я сделаю следующую статью Там тоже все очень просто.

[/box]

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

Вариант 2

Скачиваем папку с файлами [urlspan]отсюда[/urlspan].

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

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

Далее нужно подключить файл font-awesome.min.css, лежащий в папке CSS. Используем следующую строку, в ней только пропишите свой путь (домен и название темы). Размещаем ее по аналогии, как и с первым вариантом — в шапку сайта.

<link rel="stylesheet" href="http://ваш домен/wp-content/themes/название папки с темой/css/font-awesome.min.css">

Далее аналогичным образом ищем понравившуюся иконку и вставляем ее в нужные места шаблона.

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

Изменение цвета иконок

Если же вам необходимо изменить цвет иконок, то это также вполне реально и не составит труда. У каждой иконки имеет общий класс (.fa) и индивидуальный класс с названием иконки. На примере выше с иконкой карандаша индивидуальный класс следующий:

fa-pencil-square-o

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

.fa-pencil-square-o:before{
color: #111; /*черный цвет*/
font-size:12px /*размер иконки 12 пикселей в ширину и высоту*/
}

Аналогично можно прописать оформление и для всех иконок Font Awesome, если нет нужды делать каждую индивидуально. Например, получится:

.fa:before{
color: #111; /*черный цвет*/
font-size:12px /*размер иконки 12 пикселей в ширину и высоту*/
}

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

На этом сей материал я заканчиваю. Надеюсь, что он вам будет полезен. Тема актуальная. Лично я теперь использую такие иконки на всех сайтах. Стараюсь избавляться от всех картинок, и делать все максимально чисто и просто.

А вы используете иконки и слышали ли о них? Если нужна будет помощь, то обязательно пишите свои вопросы в комментариях.

Пока.

С уважением, Константин Хмелев!

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

Начало работы

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

Иконки для сайта. Быстро.

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

Легкие обновления

Так как каждый сайт будет иметь уникальный набор иконок, то вы с легкостью можете его обновлять без каких-либо изменений в коде. Чудненько =).

Автоподдержка доступности

CDN Font Awesome поможет вам автоматизировать поддержку доступности ваших иконок для всех посетителей. Узнайте подробнее о лучших практиках доступности.

Асинхронная загрузка

Хотите ускорить загрузку вашего сайта? И мы тоже. Ваши иконки будут загружаться в фоновом режиме, что даст невероятную скорость вашему сайту.

Расширенная кастомизация Легко

Хотите управлять и размещать файлы Font Awesome сами? Вы можете скачать, кастомизировать и использовать иконки с вашими настройками. В наборе файлов Font Awesome есть как и простой CSS-файл, так и файлы препроцессоров: Sass и Less.

Использование CSS
  1. Скопируйте полностью папку font-awesome в папку вашего проекта.
  2. Вставьте нижеследующий код в тег <head> в HTML-код вашего вебсайта.
Использование Sass или Less

Используйте этот метод для кастомизации Font Awesome 4.7.0 при помощи LESS или SASS.

  1. Скопируйте полностью папку font-awesome в папку вашего проекта.
  2. В вашем проекте откройте файлы font-awesome/less/variables.less или font-awesome/scss/_variables.scss и отредактируйте @fa-font-path или $fa-font-path соответственно, для того, чтобы указать путь к папке со шрифтами.

Путь к папке со шрифтами должен указывать относительно скомпилированной папки css.

Продвинутый уровень Профи

Less Ruby Gem

Используйте официальный Font Awesome LESS Ruby Gem для легкого внедрения Font Awesome LESS в Rails-проект. Занимается поддержкой:@supercodepoet.

    Добавьте эту строку в Gemfile вашего приложения:

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.less :

Sass Ruby Gem

Используйте официальный Ruby Gem Font Awesome SASS для легкого подключения Font Awesome SASS в ваш Rails- или Compass-проект. Занимается поддержкой: @supercodepoet.

    Добавьте нижеуказанную строку в Gemfile вашего проекта:

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.scss :

Дополнительная информация

Валидаторы

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

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

Internet Explorer 8 и @font-face

IE8 имеет несколько проблем с @font-face при совместном использовании с псевдоэлементом :before . Font Awesome как раз использует такую комбинацию. Если страница закеширована или загружена без наведенного курсора мыши на окно браузера (например, при нажатии на кнопку «обновить» или при загрузке контента через фрейм), то страница будет сгенерирована до подгрузки шрифта. Наведение курсора мыши на страницу (body) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует. Подробности данной проблемы.

Необходима поддержка IE7 ?

Если вам нужна поддержка IE7 , то примите мои соболезнования. Ну правда. Font Awesome 4.7.0 не поддерживает IE7и версии ниже. Вам необходимо прочитать инструкции по FA 3.2.1 для использования в IE7. Затем можете пойти и пожаловаться тому, кто потребовал поддержку IE7 .

Решение ошибок

Если у вас возникли проблемы в работе с Font Awesome, то можете поискать решение на wiki -странице по частым ошибкам. Занимается поддержкой: @gtagliala.

Иконки Font Awesome на сайте

Использовать на сайте иконки Font Awesome очень просто и для этого совсем не надо быть дизайнером. Даже если вы не подберёте себе нужную иконку из коллекции бесплатных (1109 free иконок), то всегда можно купить профессиональный набор (1877 pro иконок).

Сегодня мы будем верстать блок — «Контакты». Это пример типичного информационного блока, обычно от находится внизу сайта или на отдельной странице. Если вы думаете, что это нарисовал дизайнер в фотошопе, то глубоко ошибаетесь. Для создания такого блока вообще не нужен Photoshop, достаточно иметь хороший вкус, немного разбираться в HTML5/CSS3 и уметь работать с иконочным шрифтом Font Awesome.

Работать с иконочным шрифтом мы с вами сегодня научимся, а изучить основы HTML5/CSS3, поможет замечательный видеокурс — «Вёрстка сайта с нуля 2.0».

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

Официальный сайт: https://fontawesome.com

Самый простой способ подключения — через Font Awesome CDN. Вы просто копируете строчку с ссылкой на файл стилей на официальном сайте и вставляете в свой HTML файл.

<link rel=»stylesheet» href=»https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css»>

HTML разметка

Создается контейнер div с классом «info-box», внутри которого три элемента li списка ul с двумя span. Span с классом «icon» содержит тег <i></i>, скопированный с сайта Font Awesome при выборе нужной иконки. Между тегами другой span с классом «info» находится контактная информация.

Так выглядит блок на промежуточном этапе, на голом HTML.

Работа с иконками в CSS файле

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

ul li .icon <
position:relative;
top: 2px;
display: inline-block;
width: 25px;
color: #9c27b0;
vertical-align: top;
>

Живой пример в браузере, после стилизации.

Верстальщику на заметку

Некоторые дизайнеры в своих PSD макетах используют готовые иконки, установленного шрифта Font Awesome Regular. Начинающего верстальщика это может сбить с толку и вместо того, чтобы вставить иконку через тег <i>, он вырежет иконку и вставит, как картинку. Так делать не надо, это крайне непрофессионально!

Смотрите весь код на jsfiddle.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov. ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. задать соответствующие классы для элементов <i> и <span> ;
  2. добавить к нужному элементу с помощью псевдоэлементов :before, :after и соответствующего значения свойства content.
Пример использования шрифтов Awesome

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

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

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

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

Чтобы выяснить это посетите официальный сайт &#8212;

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

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

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

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

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

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

Подключения Font Awesome к сайту — все варианты | Делать сайт

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

В сущности Font Awesome это библиотека (хранилище) обыкновенного шрифта в векторном формате, где вместо традиционных букв и цифр используются значки (иконки), символизирующие различные предметы, события, действия и т.д. Ими легко пользоваться. Они встраиваются в документы html, адаптируются с помощью языка css, масштабируются в зависимости от изменения размера экрана, признаются всеми браузерами и регулярно обновляются.

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

Практика подключения Font Awesome

Она может быть реализована благодаря:

  • внешнему подключению к самому хранилищу;
  • скачиванию стандартной сборки;
  • скачиванию индивидуальной сборки.

Первый способ

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

Сама процедура подключения — необходимо посетить официальный сайт Font Awesome, если это англоязычная страница кликнуть на кнопку «Start for Free» в центре или на «Start» в верхнем меню, а если русскоязычная то на «Начало работы» в аналогичном меню. Далее в предлагаемую форму ввести свой электронный адрес для получения индивидуальной ссылки. В ответ придет письмо с ожидаемой ссылкой

 <script src="https://use.fontawesome.com/индивидуальный номер .js"></script>

Можно сразу ею воспользоваться, вставив в блок <head> или <footer> своего ресурса. А можно еще и зарегистрироваться, как будет предложено в письме, чтобы получить доступ к своему аккаунту с целью приобретения дополнительных возможностей.

Существует более простой путь, если использовать одну из старых, но рабочих ссылок

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

или

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Второй способ

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

Самый простой путь — скачать версию 4.7.0. Для этого необходимо опять войти на тот же официальный сайт. Если это русскоязычная страница, то в центре кликуть на кнопку «Скачать». Появится окно с сообщением о доступности 5-й версии и предложением ею воспользоваться, но мы находим в нижней части окна кнопку, где можно получить Font Awesome 4, которую и нажимаем. В результате получаем архив, распаковываем его в нужное место и прописываем строку в блок <head>

 <link rel="stylesheet" href="/ . .. /css/font-awesome.min.css">

А если любопытствующие нажмут кнопку — «Font Awesome 5», то попадут на англоязычную страницу, где появится возможность воспользоваться различными платными и бесплатными вариантами. Например, можно скачать 5-ю версию с созданием аккаунта для получения доступа к инструментарию и много чего еще, а можно даже попробовать 6-ю.

Решив немного познакомиться с этими последними редакциями, я узнал, что в большинстве таких случаев для подключения Font Awesome лучше воспользоваться файлом стилей css/all.css

 <link rel="stylesheet" href="/ ... /css/all.css">

Другие файлы стилей предназначены для исключительных ситуаций.

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

Третий способ — индивидуальная сборка

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

Для этого, заходим на официальный сайт Fontello, откроется несколько видов шрифтов. Я всегда выбираю Font Awesom. Нажимаем на нужные символы, при этом, они помечаются красными кругами (для отмены — нажать еще раз) и кликаем на клавишу «Download webfont». При желании, предварительно нажимая кнопки слева, можно посмотреть на выбранные символы в сгруппированном виде и поварьировать их настройками.

На этом все, упакованный архив по аналогии скачивается и распаковывается в нужное место. У меня, в распакованном виде он занимает 55КБ. Правда, это объем занимают лишь 4 мной выбранных символа, но если туда добавить еще некоторое количество, то объем станет немногим больше.

В порядке информации и для сравнения — полные сборки версий Font Awesom составляют: 4-я — 1.26МБ, 5-я — 14.8МБ, 6-я — 11МБ.

Скаченный архив Fontello выглядит следующим образом

Запустив файл demo.html можно увидеть все скаченные значки из полученного архива, в данном случае 4 шт.

Стили подключаются по аналогии со вторым способом, только файл стилей другой

 <link rel="stylesheet" href="/путь до шрифта/css/fontello.css">

Использование символов Font Awesom

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

Их назначение:

  • 1 — основное;
  • 2 — для IE;
  • 3 — для анимации;

Принцип применения иконок Font Awesome един, но имена классов у них могут быть другие. К примеру, отображение иконки «бургер меню», как правило, осуществляется с помощью кода — <span></span>, а у полученной благодаря сервису Fontello код другой — <span></span>. Ниже показано еще три примера использования выбранных и скаченных иконок, которые упоминались выше

 <span></span>
 <span></span>
 <span></span>

Как результат — демонстрация четырех вышеобозначенных иконок:

Один нюанс — часто при отображения символов применяется тег <i>, а иногда тег <span>, но имеется мнение, что <span> предпочтительнее.

Заключение

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

Host Yourself — веб-шрифты

Если вам нравится управление, вы можете самостоятельно разместить Font Awesome, и вы можете использовать веб-шрифты + CSS, описанные ниже, или SVG + JS, чтобы добавить значки в свои проекты.

Advertisement

Мы расскажем об основах настройки веб-шрифтов и о том, как использовать определенные стили значков Font Awesome.

Перед началом работы

Убедитесь, что вы:

  • Загрузите файлы Font Awesome v6 и держите их под рукой.
  • Хотите использовать метод WebFonts+CSS Font Awesome.

Настройка с помощью веб-шрифтов

Внутри Font Awesome Загрузив или упаковав, вы найдете нужные файлы. Папка /css содержит основные стили и утилиты для всех семейств Font Awesome (Classic, Sharp и Brands), а также параметры стиля (Solid, Regular, Light, Duotone и Thin). Папка /webfonts содержит все файлы шрифтов, от которых зависят файлы CSS.

В нашей версии для загрузки Pro есть бесплатная и профессиональная версии каждого из них — выберите ту, которая подходит для вашего проекта, и загрузите эти файлы.

, которые файлы и папки Что там
/Fontawesom Файлы CSS для использования веб-шрифтов
/fontawesome6/free/webfonts Только бесплатные иконки в качестве веб-шрифтов для использования с CSS
/fontawesome6/free/css CSS-файлы для использования только бесплатных веб-шрифтов
9

Скопируйте папки /webfonts и /css в каталог статических ресурсов вашего проекта (или туда, где вы предпочитаете хранить интерфейсные ресурсы или материалы поставщиков). Не забудьте включить основной файл стилей — /css/fontawesome.css , а также файлы CSS для любых отдельных стилей, которые вы хотите использовать, и вы можете удалить любые .css и файлы веб-шрифтов, которые вы не планируете использовать.

Скопируйте WebFonts и CSS -активы в один из ваших каталогов проекта

Вот удобная таблица, которая показывает, какие файлы идут, с какими стилями:

Дважды проверьте свои пути

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

Юсс! Вы готовы добавить значки

Как сказал Энакин, это очень круто! Все наши иконки теперь готовы выполнить ставку вашего проекта. Узнайте, как добавить их в свой проект, а затем используйте их силу, чтобы внести порядок и стиль в свой пользовательский интерфейс!

Добавьте несколько иконок!

Альтернативная установка: использование all.css

В папке /css вы могли заметить файл с именем all.css . Этот файл содержит основные стили и утилиты ПЛЮС все значки во всех классических стилях в Font Awesome. (Семейство Sharp не включено в файл all.css — вам нужно добавить файлы Sharp .css отдельно.)

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

Если вы хотите использовать all.css , просто скопируйте папку /webfonts и файл /css/all.css в каталог ресурсов вашего проекта, где хранятся другие изображения и CSS. Вы захотите сохранить их в одном каталоге.

Затем добавьте ссылку на файл /your-path-to-fontawesome/css/all.css в каждого шаблона или страницы, где вы хотите использовать Font Awesome.

Реклама

Совместимость со старыми версиями

Если в вашем проекте используется старая версия Font Awesome, мы обеспечим вам обратную совместимость. Это означает, что вам не придется обновлять имена значков в вашем проекте — мы автоматически переведем все имена значков более старых версий, синтаксис стилей и ссылки на значки псевдоэлементов CSS. Вот как включить эту поддержку для предыдущей версии, которую вам нужно поддерживать:

Совместимость с версией 5

Если вы размещаете сами и используете только определенные стили, добавьте css/v5-font-face. css к файлам, связанным с вашим html head . (Файл all.css включает эти утилиты по умолчанию, поэтому вам не нужно ничего делать.)

Вот пример:

Совместимость с версией 4

Если ваш проект содержит ссылки на значки Font Awesome 4, добавьте css/v4-font-face.css к файлам, связанным с вашим html head . Затем наш CSS автоматически переведет любые имена значков Font Awesome 4 и ссылки на псевдоэлементы CSS в версию 6.

Если вы используете all.css , вам нужно добавить файл v4-shims.js , который будет сопоставлять имена значков V4 со значками в последней версии Font Awesome, например:

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

Font Awesome Intro

❮ Назад Далее ❯


Чтобы использовать значки Font Awesome, добавьте следующую строку в раздел вашей HTML-страницы:

Примечание: Загрузка и установка не требуются!

Вы размещаете значки Font Awesome, используя префикс fa и имя значка.

Пример

Следующий код:









Результаты:

Попробуйте сами »

Font Awesome предназначен для использования со встроенными элементами. и элементы широко используются для иконок.

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



fa-lg (увеличение на 33%), fa-2x , fa-3x , Классы fa-4x или fa-5x используются для увеличения размеров значков относительно их контейнера.

Пример

Следующий код:





Результат:

Попробуйте сами »

Подсказка: Если ваши значки обрезаются сверху и снизу, увеличьте высоту строки.


Классы fa-ul и fa-li используются для замены маркеров по умолчанию в неупорядоченных списках.

Пример

Следующий код:


     
  • Список значки

  • Значки списка

  •  
  • Значки списка

Результатов:

  • Значки списка
  • Значки списка
  • Значки списка

Попробуйте сами »


fa-бордюр , fa-pull-right или fa-pull-left классы используются для кавычек или значков статей.

Пример

Следующий код:


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Результат:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Попробуйте сами »


Класс fa-spin позволяет вращать любой значок, а fa-pulse class получает любую иконку, чтобы вращаться с 8 шагами.

Пример

Следующий код:





Результат:

Попробуйте сами »

Примечание. IE8 и IE9 не поддерживают анимацию CSS3.


Классы fa-rotate-* и fa-flip-* используются для поворота и отражения значков.

Пример

Следующий код:






Результат:

Попробуйте сами »


Чтобы сложить несколько значков, используйте класс fa-stack на родительском Класс fa-stack-1x для значка обычного размера и fa-stack-2x для значка большего размера.

fa-inverse можно использовать в качестве альтернативного цвета значка. Вы также можете добавить большие классы значков родительскому элементу для дальнейшего управления размером.

Пример

Следующий код:


 
 

fa-twitter on fa-circle-thin


 
 

fa-twitter (inverse) на fa-circle


 
 

fa-ban on fa-camera

Результат:

fa-twitter на fa-circle-thin
fa-twitter (инверсия) на fa-circle
fa-ban на fa-camera

Попробуйте сами »


Класс fa-fw используется для установки значков фиксированной ширины. Этот класс полезен, когда используется другая иконка. ширины сбрасывают выравнивание. Особенно полезно в навигационных списках и группах списков Bootstrap.

Пример

Попроб. Самостоятельно »


Font Awesome также отлично работает со всеми компонентами Bootstrap.

❮ Предыдущий Следующий ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

COLOR PICKER
КОД ИГРЫ

Играть в игру




Top Tutorials
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

9004 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

0 Top1 Examples
1 Top Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


ФОРУМ | О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3. CSS.

Как добавить значки Font Awesome в HTML и CSS?

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

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

Как добавить значки Font Awesome?

Существует два способа добавить бесплатную версию Font Awesome Icons на веб-страницу HTML:

1. Загрузить библиотеку

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

<голова>

Библиотеки других версий шрифта awesome доступны онлайн.

2. Получить код комплекта

Второй способ добавить значок шрифта Awesome на вашу веб-страницу — создать учетную запись на официальном сайте Font Awesome, чтобы получить код под названием «код комплекта». Этот код можно использовать при вставке шрифта awesome на вашу веб-страницу. Как только вы получите код комплекта, добавьте ссылку в атрибут src тега

При получении набора вставьте код вместо «kitcode» в ссылке и вперед. Например.

Пример

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

Примечание. Значки Font Awesome добавляются в элементы или .

Префикс fa используется для добавления значков шрифта awesome вместе с именем значка. Более новые версии шрифта awesome также используют такие префиксы, как fas (для сплошного режима) и far (для обычного режима).

Вывод

Шрифт Awesome Camera Icon успешно вставлен.

Демонстрация ниже показывает разницу между префиксами fas и far.

Вывод

Значок колокольчика шрифта awesome (сплошной режим и обычный режим) успешно внедрен.

Теперь, когда мы знаем, как вставить значок Font Awesome на веб-страницу, давайте посмотрим, как изменить размер значков Font Awesome.

Изменение размера значков Font Awesome

Всего существует 13 классов, которые используются для изменения размера значков Font Awesome, и эти классы: фа-хс, фа-см, фа-лг, фа-2х, фа-3х, фа-4х, фа-5х, фа-6х, фа-7х, фа-8х, фа-9х и фа-10х.

Пример

В этом примере демонстрируются некоторые из упомянутых выше классов.

Вывод

На веб-страницу вставляется значок колокольчика разных размеров.

Подробнее об иконках Font Awesome!

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

1.

Анимация значков Font Awesome

Вы можете анимировать значки Font Awesome с помощью перечисленных ниже классов.

fa-spin : Используется для поворота значка.

fa-pulse : Также используется для поворота значка, но с 8 шагами.

Пример

Этот пример демонстрирует вышеупомянутые классы.

Вывод

классы fa-spin и fa-pulse.

2. Font Awesome Listed Icons

Вы можете заменить обычные маркеры, используя классы fa-ul и fa-li.

Пример

Здесь демонстрируются упомянутые выше классы.

  • Элемент 1
  • < /span>Элемент 2
  • Элемент 3

Выход

Перечисленные значки Font Awesome встроены в веб-страницу HTML.

3. Поворот и отражение значков Font Awesome

Вы можете вращать и переворачивать значки Font Awesome, используя классы fa-rotate-* и fa-flip-*.

Пример

В приведенном ниже примере показано, как повернуть и перевернуть значки шрифта awesome.

Выход

Удивительный значок автомобильного шрифта поворачивается и переворачивается под разными углами.

4. Стекирование значков Font Awesome

Вы можете складывать значки Font Awesome, используя следующие классы.

fa-stack: Используется для значка, считающегося родительским в стеке.

fa-stack-1x: Используется для значков обычного размера в стеке.

fa-stack-2x: Используется для значка большего размера в стеке

fa-inverse: Используется для изменения цвета значка в стеке.

Пример

Этот пример представляет собой демонстрацию значков с набором шрифтов awesome.

Выход

значок шрифта awesome ban успешно сложен на значок шрифта awesome car.

5. Иконки Font Awesome с рамками и вытягиванием

Вы можете добавлять границы и вытягивать значки Font Awesome, используя классы; классы fa-border, fa-pull-right и fa-pull-left.

Пример

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

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

Вывод

Цитата успешно перетянута влево с границей.

Заключение

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

Прочтите это перед использованием Font Awesome в WordPress

Хотите использовать значки Font Awesome на своем веб-сайте WordPress? Иконки — отличный способ привлечь внимание к тексту, добавив иллюстративное представление содержимого, которому они назначены.

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

Вот все, что вам нужно знать, чтобы реализовать иконки Font Awesome в WordPress, так что продолжайте читать!

Содержание

  • Что такое Font Awesome
  • Зачем вам может понадобиться Font Awesome в WordPress
  • Как добавить Font Awesome в WordPress и Шаблоны
  • Плагины для использования Font Awesome в WordPress без использования HTML или шорткодов
  • Как добавить Font Awesome в WordPress без плагинов
  • Как исправить проблемы с Font Awesome
  • Список альтернатив значкам шрифтов для WordPress и набор инструментов для значков на основе CSS. Он используется более чем на 32% сайтов по всему миру (более 23,6 миллиона сайтов на сегодняшний день) , что делает Font Awesome самым популярным набором иконочных шрифтов и набором инструментов в Интернете.

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

    Итак, большой вопрос: Является ли Font Awesome бесплатным?

    Короткий ответ: да!

    Вы можете выбрать один из двух типов планов: Бесплатно (бесплатно навсегда) и Стандартный (99 долларов в год) . В бесплатной версии есть множество различных значков — достаточно, чтобы удовлетворить ваши потребности в значках для любого веб-сайта. Хотя основное отличие заключается в том, что платный план включает в себя последнюю версию Font Awesome, а также доступ к использованию всех доступных значков, включая значки Pro.

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

    Но в целом Font Awesome — это самое обширное из когда-либо созданных семейств шрифтов. Он включает в себя более 1600 бесплатных иконок, а также более 7800 профессиональных иконок практически для всего, о чем вы только можете подумать: от дизайна интерфейса до брендинга в социальных сетях, и многие другие типы иконок из более чем 70 категорий.

    Почему вам может понадобиться Font Awesome в WordPress

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

    В отличие от значков на основе изображений (которые могут замедлить скорость страницы) , значки Font Awesome можно использовать со стандартными методами изменения размера CSS, которые делают их намного быстрее, чем изображения. Это идеально, учитывая, что скорость является важным фактором в дизайне, а — для SEO-оптимизации.

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

    Это отличный способ добавить символы и пиктограммы при создании веб-сайта. Также важно использовать правильные инструменты для ваших нужд. Шрифт по умолчанию, который поставляется с каждой установкой WordPress, великолепен, но он не включает Font Awesome, и вы получаете ограниченный набор значков. Если вам нужно больше возможностей для ускорения дизайна и доступности вашего веб-сайта WordPress, то Font Awesome должен быть первым в вашем списке!

    Как добавить Font Awesome в WordPress

    Font Awesome предлагает различных способов добавления значков на ваш сайт WordPress: с помощью плагинов или путем настройки WordPress без использования плагина. Но есть еще лучший и более эффективный способ добавить его на свой сайт WordPress — и мы рассмотрим их все!

    Официальный плагин Font Awesome для WordPress.0246 для вас. Плагин работает быстрее, и вам не нужно со временем пересматривать отредактированный код. Вам не нужно будет редактировать какие-либо файлы темы вашего сайта WordPress, и вы сможете использовать значки шрифтов везде на нем!

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

    Чтобы добавить значки на страницы, записи и шаблоны WordPress

    Теперь, когда вы завершили процесс установки, вы можете использовать несколько методов для добавления значков в ваш контент WordPress. Самый простой способ — использовать классический редактор .

    • Перейдите, чтобы добавить новую страницу или запись в панели администратора WordPress, нажмите кнопку «Добавить шрифт Awesome» и выберите любой из значков, которые вы хотите добавить в свой контент

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

    После того, как вы нашли подходящие для дизайна вашего веб-сайта, просто скопируйте и вставьте один из следующих HTML-кодов в свой контент WordPress. В этом примере мы используем значок «WordPress Simple».

    • Добавьте значки с помощью тегов, например,
    • Или с помощью шорткода, который можно использовать следующим образом: [icon name="wordpress-simple"]

    Плагины для использования Font Awesome в WordPress без использования HTML или шорткодов

    Безусловно, самый простой вариант добавления значков — через плагины перетаскивания с интерфейсом What You See Is What You Get. Самым большим преимуществом использования таких плагинов является то, что потребность в добавлении дополнительного кода близка к нулю. Это означает, что вы получите желаемые результаты быстрее, и при этом вам не придется «жертвовать» производительностью вашего сайта для этого, так что это беспроигрышное решение!

    • Visual Composer Website Builder — все бесплатные значки Font Awesome доступны для бесплатной версии Visual Composer, и вы можете найти их вместе с несколькими другими доступными элементами значков. Кроме того, вам не нужно устанавливать официальный плагин Font Awesome — он уже включен! Кроме того, вы также можете легко изменить цвет значка, размер, добавить форму фона и другие параметры прямо из редактора. На самом деле это один из многих элементов интеграции и совместимости, которые Visual Composer предлагает при каждой установке.

    Как использовать Font Awesome на вашем сайте

    by Sylvia Bass | 10 июня 2021 г. | Советы и рекомендации

    Font Awesome — это широко используемый набор значков, который дает вам масштабируемые векторные изображения, которые можно настраивать с помощью CSS. В бесплатном наборе более 1600 иконок, и вы сможете найти иконку, соответствующую вашим потребностям.

    Расширенная функция

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

    Добавление кода Font Awesome Kit на ваш сайт

    Вам нужно будет создать свой собственный Font Awesome Kit. См. инструкции ниже.

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

    Тема Divi

    Если вы используете тему Divi, в нее встроена возможность добавления кода комплекта.

    1. Перейти Divi > Параметры темы
    2. Нажмите на вкладку Интеграция в параметрах темы Divi
    3. В поле Добавьте код в раздела блога , вставьте код из набора Font Awesome.
    4. Нажмите Сохранить изменения .
    5. Теперь вы сможете использовать значки Font Awesome на своем сайте.

    Темы, не относящиеся к Divi

    Если вы не используете Divi в качестве темы, не бойтесь, вы все равно можете добавить код в раздел вашего сайта. Вам нужно включить Расширенные настройки Плагин в первую очередь.

    1. Перейдите к Плагины > Все
    2. Найдите Расширенные настройки и нажмите кнопку Активировать .
    3. После активации перейдите в раздел «Настройки» > «Дополнительные настройки».
    4. Нажмите Сохранить изменения

    Как добавить значки Font Awesome на ваш сайт

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

    Поиск нужного значка

    1. Введите поисковый запрос в поле поиска. Вы можете использовать фильтр бесплатных значков, чтобы ограничить набор значков теми, для которых не требуется платная лицензия.
    2. Например, если вы ищете значок предупреждения, введите «предупреждение». Вы увидите набор значков, соответствующих этому описанию. Найдите тот, который лучше всего соответствует вашим потребностям.
    3. Кроме того, вы можете просто просмотреть более 1600 бесплатных иконок, пролистав весь набор.
    4. Когда вы найдете тот, который вам нравится, щелкните значок, чтобы просмотреть сведения об этом значке, включая HTML-код для использования значка на вашем сайте.
    5. Скопируйте предоставленный код HTML. Он будет начинаться с

    Использование кода значка

    Теперь, когда вы нашли идеальный значок, пришло время добавить его на свой сайт.

    Редактор блоков

    Если вы используете редактор блоков, мы рекомендуем использовать блок Custom HTML. Хотя вы можете редактировать некоторые блоки как HTML, это не всегда работает гладко. Использование HTML-блока работает лучше всего.

    1. Добавьте новый пользовательский блок HTML
    2. Добавьте код Font Awesome, где вы хотите, чтобы значок отображался вместе с любым дополнительным содержимым. Вам нужно будет добавить некоторые базовые элементы HTML, такие как теги абзацев, теги заголовков и т. д.
    3. Значок будет такого же размера, как ваш текст. Если вы хотите изменить размер, вы можете использовать класс CSS, чтобы сделать его больше или меньше. У Font Awesome есть отличная страница, объясняющая, как использовать эти классы и куда поместить код.
    4. Вы не увидите значок в блоке при редактировании, но можете Просмотрите страницу, и вы увидите отображаемый значок. Если вы не видите значок, убедитесь, что вы добавили Font Awesome Kit на свой веб-сайт. Иконки взяты прямо с сайта Font Awesome.
    Пример кода HTML

    Привет, мир!

    Привет, мир!

    Пример вывода приведенного выше кода.

    Использование FontAwesome в Divi

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

    В Divi вы можете использовать значок Font Awesome в любом модуле, который позволяет вам редактировать на вкладке «Текст» (то есть HTML), а также на вкладке «Визуальные».

    1. Отредактируйте блок, в который вы хотите добавить значок, например, текстовый модуль.
    2. Щелкните вкладку Text при редактировании содержимого, чтобы отобразить базовый HTML-код.
    3. Добавьте HTML-код значка Font Awesome, который вы скопировали ранее.
    4. Вставьте его в нужное место и добавьте класс CSS, чтобы при необходимости изменить размер.
    5. Сохраните модуль.
    6. В Divi вы должны увидеть значок в режиме редактирования, так как вы видите страницу в режиме реального времени.

    Получение собственного набора Font Awesome Kit Код

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

    1. Перейдите на стартовую страницу Font Awesome.
    2. Добавьте свой адрес электронной почты и нажмите кнопку « Отправить код комплекта ».
    3. Проверьте свою электронную почту для подтверждения и настройте свой пароль и данные учетной записи.
    4. После того, как вы настроите свою учетную запись, вам будет предоставлен код комплекта . Вы будете использовать этот код, чтобы добавить Font Awesome на свой сайт.
    5. Используйте приведенные выше инструкции, чтобы добавить свой собственный комплект в раздел вашего сайта.

    Это может показаться немного сложным, пока вы не сделаете это несколько раз. Теперь у вас есть возможность использовать более 1600 масштабируемых значков, чтобы сделать ваш сайт интереснее и удобнее. Попробуйте!

    Подписаться на новые сообщения

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

    Адрес электронной почты

    Начало работы с Font-Awesome

    Введение

     

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

     

    Начало работы с Font-awesome

     

    Как следует из самого названия, этот пакет потрясающий. Из сообщения Github:

     

    Это простой текст, которым можно легко манипулировать, как обычным текстом, используя шрифты. Когда вы растягиваете или увеличиваете значок изображения (PNG), он становится размытым, это выглядит плохо на простом языке. Если вы увеличите любой шрифт из пакета Fontawesome, он никогда не станет размытым или пиксельным. Кроме того, ширина и высота не требуются, поскольку они используются в изображениях в качестве атрибутов, просто увеличьте размер шрифта, он манипулирует значком. Лучше всего то, что этот пакет можно загрузить из пакета Nuget или консоли диспетчера пакетов. На следующем изображении показано, как установить пакет из консоли PM.

     


    Как видно на предыдущем изображении, вам нужно открыть окно PM Console и нажать Желтоватую команду Install. Install-Package font-awesome -Version 4.1.0 После установки вы можете столкнуться с ошибкой для пакета сборки. То есть зависимости от этой библиотеки и их версия могут вызвать здесь некоторые проблемы. Как например с которым я столкнулся при добавлении в свой проект была сборка Web.Optimization так как для этой версии этой библиотеки требуется версия 1. 1.3. Если требуется какое-либо обновление или обновление пакета в качестве его зависимостей, то без колебаний просто обновите пакеты. На самом деле, обновления для пакетов должны регулярно проверяться и обновляться. После добавления в веб-проект будут добавлены следующие файлы и папки.

     

    При добавлении/установке добавляются два файла CSS для улучшения шрифта. Поразительно, файлы одинаковые, почему так? Потому что небольшая разница между ними может иметь очень большое значение. Минимизированная версия файла CSS — .min.css . Она небольшая, легкая и обеспечивает хорошую производительность. Таким образом, при добавлении ссылки в макете минимизированная версия предпочтительна или необходима на самом деле.

     

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

     

    . eot: встроенные шрифты Open Type — это компактная форма шрифтов OpenType, разработанная Microsoft для использования в качестве встроенных шрифтов на веб-страницах.

    .svg: это распространенное и известное, но тем не менее масштабируемая векторная графика (SVG) — это формат векторного изображения на основе XML для двумерной графики с поддержкой интерактивности и анимации.

    .ttf: разработан Apple, расшифровывается как шрифт True Type. Это означает, что шрифт можно масштабировать до любого размера даже без ущерба для качества.

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

    .otf: означает шрифт открытого типа.

    Это все о расширениях файлов в папке.

     

    Use

     

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

    1.   

    Теперь, чтобы использовать класс вне классов, определенных CSS, используйте следующее:

    1.   

    Как видно из предыдущего фрагмента, именно так определяются классы шрифтов в файле .css. Класс fa определяется следующим образом:

    1. .fa {
    2.   отображение: встроенный блок;
    3.   семейство шрифтов: FontAwesome;
    4.   стиль шрифта: обычный;
    5.   начертание шрифта: нормальный;
    6.   line-height: 1;
    7.   -webkit-font-smoothing: сглаживание;
    8.   -moz-osx-font-smoothing: оттенки серого;
    9. }  

    fa-fw определяется следующим образом:

    1. .fa-fw {
    2.   ширина: 1,28571429 em;
    3.   выравнивание текста: по центру;
    4. }  

    Это определения классов, определенных в CSS.

    Добавить комментарий

    Ваш адрес email не будет опубликован.

  • Стиль значка Веб -шрифт.
    Brands Free fa-brands-400.* brands.css
    Solid Free fa-solid-900.* solid. css
    Regular Pro only fa-regular-400.* regular.css
    Light Pro only fa-light-300. * light.css
    Thin Pro only fa-thin-100.* thin.css
    Duotone Pro only fa-duotone -900.* Duotone.css
    Sharp Solid Pro только FA-SHARP-SOLID-900.* SHARP-SOLID-900.0074 Ссылка на Font Awesome в вашем проекте

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

    Вот пример html-страницы со ссылками на файлы в и парой иконок в содержании.

    Только на этот раз мы рекомендуем отпустить все мысли в голову.