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

Font awesome icons – это масштабируемые векторные иконки, изначально разработанные для использования с фреймворком Bootstrap, а затем доступные для других. Как видно из названия, значки Font Awesome просто великолепны для использования в любом месте вашего сайта для различных целей. Значки масштабируются, что означает, что один и тот же значок можно масштабировать до разных размеров без потери качества отображения. На данный момент Weebly предлагает любой вариант по умолчанию для добавления шрифтов значков к элементам вашего сайта. В этой статье мы обсудим, почему и как использовать отличные шрифтовые иконки на сайте Weebly.

Почему вам следует подумать об использовании шрифтовых значков?

Есть несколько причин, по которым вам следует подумать об использовании значков шрифтов:

  • Иконки можно использовать в личных и коммерческих целях.
  • Не требуется изображения и JavaScript, что ускоряет загрузку сайта.
  • Внешний вид значка можно полностью настроить с помощью CSS.
  • Можно использовать значки разных размеров с идеальным разрешением.
  • Очень привлекательно на устройствах с дисплеем Retina.

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

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

Хотя есть много способов использования значков с отличным шрифтом, мы объясним два простых метода:

  • Использование Bootstrap CDN из любых сервисов CDN, таких как MaxCDN
  • Размещение потрясающих иконок шрифтов на вашем собственном сайте

Использование Bootstrap CDN

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

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

Мы рекомендуем связать таблицу стилей в разделе заголовка любой страницы на вкладке «Страницы» перед ее развертыванием на действующем сайте. Возможно, вы можете создать тестовую страницу, скрытую от поисковых систем, или создать тестовый сайт и связать таблицу стилей в разделе заголовка на вкладке «Настройки».

Отличные шрифтовые иконки будут работать на бесплатном сайте Weebly, и для этой цели нет необходимости в дополнительных планах.

Хостинг на вашем сайте

Вместо использования CSS Bootstrap CDN вы также можете загрузить полные файлы шрифтов и CSS из домашняя страница сайта font awesome на Github. Загрузите все папки на свой сайт Weebly, отредактировав исходный HTML / CSS. Убедитесь, что вы загрузили все типы шрифтов и файлов CSS, как показано на рисунке ниже:

Загрузите файлы Font Awesome в Weebly

Загрузите файлы Font Awesome в Weebly

Свяжите файл CSS с разделом заголовка требуемой страницы или на уровне сайта.

<link rel="stylesheet" href="http://yoursite.weebly.com/files/theme/font-awesome.min.css">

Вы можете использовать файл .css или файл .min.css. Минифицированная версия рекомендуется на действующем сайте, так как она сокращает время загрузки сайта.

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

После того, как вы решили, загружать ли таблицы стилей и шрифты или использовать CDN CSS, следующим шагом будет использование его на вашей странице с помощью элемента «Вставить код».

Давайте рассмотрим пример добавления значка шестеренки на вашу страницу, формат добавления значка шрифта awesome прост, как показано ниже:

<i class="fa fa-phone-square"></i> This is a font awesome phone icon.

Синтаксис состоит из трех частей:

– каждый значок следует использовать в теге .

fa – отличный шрифт префикса класса CSS.

fa-phone-square – актуальное название иконки.

Результат выполнения приведенного выше кода, вставленного в элемент «Код для внедрения», будет таким, как показано ниже:

Это значок телефона с потрясающим шрифтом.

Увеличение размера значка

Существует пять классов CSS для увеличения размера значка, как показано ниже:

<i class="fa fa-phone-square fa-lg"></i> Increases the icon size by 33%
<i class="fa fa-phone-square fa-2x"></i> Increases the icon size by 2x<
i class="fa fa-phone-square fa-3x"></i> Increases the icon size by 3x
<i class="fa fa-phone-square fa-4x"></i> Increases the icon size by 4x
<i class="fa fa-phone-square fa-5x"></i> Increases the icon size by 5x

Неограниченное количество настроек

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

<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List item 1</li>
<li><i class="fa-li fa fa-check-square"></i>List item 2</li>
<li><i class="fa-li fa fa-check-square"></i>List item 3</li>
<li><i class="fa-li fa fa-check-square"></i>List item 4</li>
</ul>

Список понравится ниже:

  • Элемент списка 1
  • Элемент списка 2
  • Элемент списка 3
  • Элемент списка 4

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

Вы также можете использовать Unicode вместо имени значка. Например, в приведенном выше примере значка списка вместо имени значка fa-check-square можно использовать эквивалентное ему значение Unicode & # xf14a ;.

Похожие записи

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *