Как использовать и оформлять иконки с помощью CSS?

Содержание:

  1. Необходимые шаги для использования иконок
  2. Использование иконок Font Awesome
  3. Масштаб иконок Font Awesome и их цвет
  4. Использование иконок с кнопками
  5. Добавление эффекта тени к иконкам
  6. Использование иконок Font Awesome в списке
  7. Анимация иконок Font Awesome
  8. Поворот иконок Font Awesome

Необходимые шаги для использования иконок

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

1) Подключите иконки к сайту

Скопируйте код, предоставленный веб-страницей Font Awesome, и вставьте в <head> каждого шаблона или страницы, где хотите использовать иконки Font Awesome.

Для использования последней версии иконок this page смотрите эту страницу .

Здесь мы используем версию 5.8.1 link rel, чтобы определить связь между текущим документом и файлом со ссылкой:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Загрузка и установка не требуются.

2) Добавьте иконки к вашему UI

Иконки должны быть расположены внутри элемента <body>. Найдите необходимую вам иконку и скопируйте ее HTML код.

Код иконки будет выглядеть следующим образом:

<i class="fas fa-camera"></i>

3) Добавьте стиль к иконкам

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

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

Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.

Для добавления иконок на веб-страницы допустимо использование тегов <i> и <span>. Если вам не нравится, что сайт предоставляет вам код с тегом <i>, вы можете заменить его на <span>.

Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом (fas, fal, far или fab).

Используйте элемента <i> для ссылки на элемент:

<i class="fas fa-camera"></i>

Или используйте элемент span:

<span class="fas fa-camera"></span>
Префикс fa устарел в версии 5. Новые префиксы по умолчанию fas (сплошной стиль), fab (бренды), far (обычный стиль) и fal (тонкий стиль).

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  </head>
  <body>
    <h2>Пример иконок</h2>
    <p>Камера</p>
    <i class="fas fa-camera"></i>
    <p>Машина</p>
    <i class="fas fa-car"></i> 
    <p>Конверт</p>
    <i class="fas fa-envelope"></i>
  </body>
</html>

Масштаб иконок Font Awesome и их цвет

Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs, span class="attribute">fa-sm, fa-lg, fa-2x и др.

Что касается цвета, он может быть установлен с помощью CSS свойства color. Просто необходимо установить иконки внутри элемента <div> и задать для него цвет в стиле, или просто установить стиль для элемента <i>.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      div {
      color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример иконок с указанными размерами и цветами</h2>
    <div>
      <i class="fas fa-camera fa-xs"></i>
      <i class="fas fa-camera fa-sm"></i>
      <i class="fas fa-camera fa-lg"></i>
      <i class="fas fa-camera fa-2x"></i>
      <i class="fas fa-camera fa-3x"></i>
      <i class="fas fa-camera fa-5x"></i>
      <i class="fas fa-camera fa-7x"></i>
      <i class="fas fa-camera fa-10x"></i>
    </div>
  </body>
</html>

Смотрите детали:

Класс Величина
fa-xs .75em
fa-sm .875em
fa-lg 1.33em
fa-2x 2em
fa-3x 3em
fa-4x 4em
fa-5x 5em
fa-6x 6em
fa-7x 7em
fa-8x 8em
fa-9x 9em
fa-10x 10em

Также возможно добавить стиль непосредственно к размеру иконки, устанавливая font-size во внешнем стиле иконки или в стилевом атрибуте HTML элемента, который ссылается на иконку.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      i {
      color: #8ebf42;
      }
      .star {
      font-size: 2em;
      }
    </style>
  </head>
  <body>
    <h2>Пример иконок с установленными размерами шрифта и цвета</h2>
    <div>
      <p>Иконка с размером по умолчанию.</p>
      <i class="fas fa-star"></i>
      <p>Font-size: 2em;</p>
      <i class="fas fa-star star"></i>
    </div>
  </body>
</html>

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

Вы можете также добавить иконки при создании кнопок. Просто вставьте иконку в элемент <button>.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Кнопки с иконками</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      button {
      border: none;
      border-radius: 5px;
      color: #ffffff;
      padding: 10px 14px;
      font-size: 16px;
      cursor: pointer;
      }
      button:hover {
      background-color: #666666;
      box-shadow: 2px 4px #999999;
      }
      .btn {
      background-color: #999999;
      }
      .home {
      background-color: #ff6347;
      }
      .menu {
      background-color: #008080;
      }
      .about {
      background-color: #e6b800;
      }
    </style>
  </head>
  <body>
    <h2>Кнопки с иконками</h2>
    <p>Icon buttons:</p>
    <button class="btn">
    <i class="fa fa-home"></i>
    </button>
    <button class="btn">
    <i class="fa fa-bars"></i>
    </button>
    <button class="btn">
    <i class="fas fa-info-circle"></i>
    </button>
    <p>Кнопки с иконками текстов и разными цветами:</p>
    <button class="home">
    <i class="fa fa-home"></i> Home
    </button>
    <button class="menu">
    <i class="fa fa-bars"></i> Menu
    </button>
    <button class="about">
    <i class="fas fa-info-circle"></i> About
    </button>
  </body>
</html>

Добавление эффекта тени к иконкам

Для добавления эффектов тени к иконкам необходимо CSS свойство text-shadow.

Установите тень для того элемента, к которому относится иконка:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h2>Пример иконок с тенью текста</h2>
    <div> 
      <i class="fas fa-apple-alt"></i>
      <i class="fas fa-car"></i>
      <i class="fas fa-star-half-alt"></i>
      <i class="far fa-smile"></i>
      <i class="fas fa-paw"></i>
      <i class="fas fa-globe-asia"></i>
    </div>
  </body>
</html>

Использование иконок Font Awesome в списке

С помощью иконок можно сделать много всего! Можете оформлять ваши HTML списки в виде декоративных маркеров.

Используйте класс fa-ul для элемента <ul> и класс fa-li для элемента <li>, чтобы заменить маркеры по умолчанию в неупорядоченном списке.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      span {
      color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Иконки в примере со списком</h2>
    <ul class="fa-ul">
      <li>
        <span class="fa-li">
        <i class="fas fa-check-double"></i>
        </span>Элемент списка 1
      </li>
      <li>
        <span class="fa-li">
        <i class="fas fa-check-circle"></i>
        </span>List item 2
      </li>
      <li>
        <span class="fa-li">
        <i class="fas fa-check-square"></i>
        </span>Элемент списка 3
      </li>
      <li>
        <span class="fa-li">
        <i class="fas fa-tasks"></i>
        </span>Элемент списка 4
      </li>
    </ul>
  </body>
</html>

Анимация иконок Font Awesome

Используйте класс fa-spin для плавного вращения иконки и класс fa-pulsefa-spinner.

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

<i class="fas fa-spinner fa-spin"></i>

Смотрите пример, чтобы увидеть разницу между классами fa-spin и fa-pulse:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h2>Иконки с классами fa-spin и fa-pulse</h2>
    <p>Spinner spin:</p>
    <i class="fas fa-spinner fa-spin"></i>
    <p>Spinner pulse:</p>
    <i class="fas fa-spinner fa-pulse"></i>
  </body>
</html>

Пример с несколькими анимированными иконками:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h2>Анимированные иконки</h2>
    <i class="fas fa-spinner fa-pulse"></i>
    <i class="fas fa-star fa-spin"></i>
    <i class="fas fa-sync fa-spin"></i>
    <i class="fas fa-haykal fa-spin"></i>
    <i class="fas fa-stroopwafel fa-pulse"></i>
    <i class="fas fa-car fa-spin"></i>
  </body>
</html>

Поворот иконок Font Awesome

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

Для произвольного поворота и отражения иконок используйте классы fa-rotate-* и fa-flip-*.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h2>Поворот иконок</h2>
    <i class="fas fa-star-half-alt"></i>
    <i class="fas fa-star-half-alt fa-rotate-90"></i>
    <i class="fas fa-star-half-alt fa-rotate-180"></i>
    <i class="fas fa-star-half-alt fa-rotate-270"></i>
    <i class="fas fa-star-half-alt fa-flip-horizontal"></i>
    <i class="fas fa-star-half-alt fa-flip-vertical"></i>
    <i class="fas fa-star-half-alt fa-flip-both"></i>
  </body>
</html>

Смотрите градус и детали вращения:

Класс Градус и детали вращения
fa-rotate-90 90°
fa-rotate-180 180°
fa-rotate-270 270°
fa-flip-horizontal Отражает иконку по горизонтали.
fa-flip-vertical Отражает иконку по вертикали.
fa-flip-both Отражает иконку по вертикали и горизонтали (требуется версия 5.7.0 или выше).