Content css font awesome: How to Use font awesome icons as CSS content code

Содержание

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

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

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

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

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

В этом посте я покажу вам, как использовать иконки Font Awesome в CSS.

Этот пост был первоначально опубликован 17 мая 2018 г. и последний раз обновлялся 6 ноября 2019 г.

1 | Установите Font Awesome на свой веб-сайт

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

Перейдите на начальную страницу веб-сайта Font Awesome. Если вы еще не использовали Font Awesome, вам будет предложено зарегистрироваться, чтобы создать свой первый набор. Набор — это, по сути, ваш собственный код, который вы можете использовать для установки Font Awesome на свой веб-сайт. Не волнуйтесь, это совершенно бесплатно! Все, что вам нужно сделать, это ввести свой адрес электронной почты, а затем нажать Отправить код комплекта .

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

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

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

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

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

2 | Выберите значок

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

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

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

3 | Настройте значок с помощью CSS

Чтобы использовать юникод, который мы нашли в Font Awesome в CSS, нам нужно использовать свойство содержимого CSS:

 content: " ";

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

Для целей этого урока я собираюсь добавить значок перед заголовком h2 (

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

 h2::before {
}

Если бы я хотел добавить свою иконку после заголовка, CSS выглядел бы так:

 h2::after {
}

Давайте начнем с добавления юникода для значка сердца в качестве значения свойства содержимого:

 h2::before {
   содержимое: "\f004";
}

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

Затем нам нужно добавить свойство семейства шрифтов, и мы собираемся использовать значение «Font Awesome 5 Free», поскольку мы используем бесплатную версию Font Awesome версии 5.

 h2::before {
   содержимое: "\f004";
   семейство шрифтов: "FontAwesome";
}

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

 вес шрифта: 600;

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

Вот код в действии…

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

См. Pen
Font Awesome in CSS by Holly Pryce (@hollypryce)
на CodePen.

Закрепить на потом?

Как настроить таргетинг на все значки Font Awesome и выровнять их по центру?

Улучшить статью

Сохранить статью

Последнее обновление: 09 мар, 2022

Читать

Обсудить

Улучшить статью

Сохранить статью

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

Наиболее предпочтительный способ центрирования значков Font Awesome — назначить класс

center каждому тегу . Установив ширину на 100%, пусть каждая иконка покрывает 100% площади по горизонтали. Кроме того, text-align затем центрирует значок в соответствии с используемой шириной.
Если мы хотим нацелить наши значки Font Awesome в нашем окне и выровнять их по центру, используя следующие методы
Пример 1: Добавление пользовательского класса во все теги . Этот метод можно использовать для всех иконок Font Awesome на странице.
Program:

< html >

     < head >
         < script источник =
"https://kit.fontawesome.com/a6e2755b4d.js"
                 crossorigin = "anonymous" >
         script >
         < style >
             . center {
                 text-align: center;                  ширина: 100%;              }          style >      head >      < body >          < центр >              < 4 h6 6 = "цвет: зеленый;" >                GeeksforGeeks              h2 >              < b >                  Centered align icons б >          center >          < br >          < i class = "fas fa-fire fa-3x Центр " > I > < I Класс = класс = . 0146 > i >          < i class = "fas fa-disease fa-3x center" > i >      body > html >
Output:
Пример 2: Добавление пользовательского класса в тег

div . Этот метод можно использовать только для раздела веб-сайта, посвященного иконкам Font Awesome.
Program:

< html >
     < head >
     < script источник =
"https://kit. fontawesome.com/a6e2755b4d.js"
             crossorigin =
"anonymous" >
     script >
< Стиль >
.center { 9000 .center { 9000 .
         ширина: 100 %;
     }
     style >
head >
     < body >

< центр >              < h2 стиль = "цвет: зеленый;" >                GeeksforGeeks              h2 >              < b >                  Centered align icons б >          center >          < br >          < div class = "center " >              < i класс = "fas " 90>< fa-4x 90><14x0146 i >              < br >              < i class = "fas fa-water fa-3x" >< / i >              < br >              < i class = "fas fa-disease fa-3x" > i >          div >      body > html >
Output:
Example 3: Добавление тега HTML для определенного раздела.