Подключение иконок в Bootstrap 4

Рассмотрим какие в Bootstrap 4 иконки можно подключить и как, примеры использования иконок, сравнение с третьей версией Бутстрап.

Фреймворк Bootstrap

В настоящий момент популярностью пользуются уже три версии — Bootstrap 3 и Bootstrap 4 и 5.

При этом Bootstrap 3 содержит библиотеку иконок по умолчанию. А вот в Bootstrap 4 нужно подключить внешнюю библиотеку иконок самостоятельно.

Доступно много бесплатных библиотек иконок, , например:

Font Awesome,
Google Material Design Icons
и другие.

Иконки используются для того, чтобы сделать веб-страницу более интерактивной и элегантной.

Чтобы добавить иконки на веб-страницу, сначала необходимо добавить внешнюю CSS-библиотеку (ссылка на CDN со стилями). Большей частью для иконок Bootstrap 4 мы будем используем Font Awesome, очень популярную библиотеку.

Есть несколько вариантов подключения в Bootstrap 4 иконок с разных CDN, вот несколько вариантов:

<!-- Первый вариант для версии 5.6.3 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<!-- Второй вариант для версии 4.3.1 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Третий вариант для версии 5.10.0 -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

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

Примечание. Скачивание или установка не требуется.

Итак, в новой версии Bootstrap 4 библиотека иконок по умолчанию не включена, в отличие от предыдущей версии Bootstrap 3, в ядро которой включены глификоны (Glyphicons) в формате шрифтов.

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

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

Давайте рассмотрим пример HTML-файла с подключением иконок и стилей Bootstrap:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Including Font Awesome in Bootstrap Template</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
    <h1><i class="fa fa-globe"></i> Hello, world!</h1>
    <!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

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

Чтобы использовать в коде иконки от Font Awesome, потребуется HTML-тег <i> вместе с базовым классом .fa и отдельным классом конкретной иконки .fa- *. Общий синтаксис использования иконок выглядит так:

<i class="fa fa-class-name"></i>

Где .fa-class-name — это имя конкретного класса значков (например, .fa-search, .fa-user, .fa-star, . fa-calendar, .fa-globe и т.д.), определённых в файле font-awesome.min.css.

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

<button type="submit" class="btn btn-primary"><span class="fa fa-search"></span> Search</button>

<button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span> Search</button>

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

Аналогичным образом, вы можете поместить иконки внутри заголовков, параграфов, таблиц или где угодно. В следующих статьях я покажу как использовать эти значки в компонентах навигации Bootstrap (Nav).

Примечание. Не забудьте оставить пробел после закрывающего тега элемента значка (т.е. после тега <i>) при использовании значков вместе со строками текста, например, внутри кнопок или ссылок на навигацию, чтобы обеспечить правильное расстояние между значком и текстом.

В более новых версиях Font Awesome задается класс .fas наряду с классом .fa-* для HTML-тега <i>.

Где * — это cloud, file, home, book, и т.д.

Префикс fa устарел с версии 5. Новое значение по умолчанию — это стиль fas (solid) и стиль fab для брендов. С версии 5.10.0+ библиоткеа имеет двухцветные значки с новой приставкой fad.

Стиль	Доступность	Префикс	Пример	Результат
Solid	Free	fas	<i class=»fas fa-camera»></i>
Regular	Pro	far	<i class=»far fa-camera»></i>
Light	Pro	fal	<i class=»fal fa-camera»></i>
Duotone	Pro	fad	<i class=»fad fa-camera»></i>
Brands	Free	fab	<i class=»fab fa-font-awesome»></i>

Вы можете изменить размер и цвет значков, добавив свойство цвета CSS. Кроме того, размер иконок уже есть среди классов в CSS-файле Font Awesome.

Вот еще один пример того как подключить иконки в Bootstrap c использованием старого класса:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Icons Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"> 
  <h1>My Icons <i class="fas fa-heart"></i></h1>
</div>
<div class="container">
  <p></p>
  <i class="fas fa-cloud"></i>
  <i class="fas fa-coffee"></i>
  <i class="fas fa-car"></i>
  <i class="fas fa-file"></i>
  <i class="fas fa-bars"></i>
</div>
</body>
</html>

В браузере мы увидим нечто подобное:

Размеры иконок

Оба фреймворка, и Web Fonts + CSS, и SVG + JS включают в себя некоторые основные элементы управления для определения размеров иконок в контексте пользовательского интерфейса вашей страницы.

Относительный размер

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

С помощью следующих классов мы можем увеличивать или уменьшать размер значков относительно унаследованного font-size.

<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 style="font-size: 0.5rem;">
  <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>

Мы увидим уменьшенные иконки:

И еще один вариант:

<div style="font-size: 24px;">
  <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>

Выведет примерно так:

Примечание. Вы также можете напрямую стилизовать размер значка, установив размер шрифта font-size в CSS вашего проекта, который нацелен на значок, или непосредственно в атрибуте стиля style элемента 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 Awesome препроцессора SCSS или Less CSS, вы можете настроить _larger.scss или _larger.less с вашим собственным масштабом.

Толщина шрифта

Поскольку Font Awesome был впервые реализован и продолжает поддерживать визуализацию с использованием метода CSS @font-face, каждый из его стилей соответствует определенной толщине шрифта:

Стиль	Доступность	Толщина
Solid	Free	900
Regular	Pro	400
Light	Pro	300
Duotone	Pro	900
Brands	Free	400

Настройка CDN

Загружайте ресурсы Font Awesome Webfont и CSS прямо из бесплатных или профессиональных CDN, представленных непосредственно сайтом Font Awesome.

Основная функция

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

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

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

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

/**
 * Настройка веб-шрифтов Font Awesome CDN
 * 
 * Загрузка Font Awesome с бесплатного или платного CDN Font Awesome Free
 */
if (! function_exists('fa_custom_setup_cdn_webfont') ) {
  function fa_custom_setup_cdn_webfont($cdn_url = '', $integrity = null) {
    $matches = [];
    $match_result = preg_match('|/([^/]+?)\.css$|', $cdn_url, $matches);
    $resource_handle_uniqueness = ($match_result === 1) ? $matches[1] : md5($cdn_url);
    $resource_handle = "font-awesome-cdn-webfont-$resource_handle_uniqueness";

    foreach ( [ 'wp_enqueue_scripts', 'admin_enqueue_scripts', 'login_enqueue_scripts' ] as $action ) {
      add_action(
        $action,
        function () use ( $cdn_url, $resource_handle ) {
          wp_enqueue_style( $resource_handle, $cdn_url, [], null );
        }
      );
    }

    if($integrity) {
      add_filter(
        'style_loader_tag',
        function( $html, $handle ) use ( $resource_handle, $integrity ) {
          if ( in_array( $handle, [ $resource_handle ], true ) ) {
            return preg_replace(
              '/\/>$/',
              'integrity="' . $integrity .
              '" crossorigin="anonymous" />',
              $html,
              1
            );
          } else {
            return $html;
          }
        },
        10,
        2
      );
    }
  }
}

Загрузка всех стилей

Используйте средство выбора CDN, чтобы выяснить, какие URL-адреса CDN и ключи целостности вы хотите использовать. Убедитесь, что вы выбрали «Webfont».

Например, если вы выбрали «Все» (All) для версии 5.10.0 (Pro), вы получите следующее:

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

Вот соответствующий PHP-код, который нужно скопировать и вставить в свой functions.php:

fa_custom_setup_cdn_webfont(
  'https://pro.fontawesome.com/releases/v5.10.0/css/all.css',
  'sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p'
);

Первый аргумент функции соответствует атрибуту href из элемента <link>, предоставляемого CDN Picker (средством выбора CDN). Он необходим.

Второй аргумент соответствует атрибуту integrity (целостности) из CDN Picker. Он необязателен.

Если Вы хотите изменить версию, которую загружаете в WordPress, вернитесь к CDN Picker и используйте его для выбора новой версии. Затем используйте полученные атрибуты href и integrity, чтобы обновить аргументы fa_custom_setup_cdn_webfont() в вашем functions.php.

Загрузка подмножества стилей

Если вы хотите загрузить подмножество стилей, вместо all.css, используйте CDN Picker (средство выбора CDN), чтобы выбрать нужные вам стили, а затем переведите каждую полученную <link> в отдельный вызов fa_custom_setup_cdn_webfont() в файле functions.php.

Обратите внимание, что при выборе конкретных стилей всегда будет одна дополнительная «ссылка» <link>, которая загружает базовый fontawesome.css, который является обязательным.

Например, если вы хотите загрузить только стиль Duotone для версии 5.10.0 (Pro), вы получите следующие ссылки из средства выбора CDN:

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/duotone.css" integrity="sha384-R3QzTxyukP03CMqKFe0ssp5wUvBPEyy9ZspCB+Y01fEjhMwcXixTyeot+S40+AjZ" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" integrity="sha384-eHoocPgXsiuZh+Yy6+7DsKAerLXyJmu2Hadh4QYyt+8v86geixVYwFqUvMU8X90l" crossorigin="anonymous"/>

Что можно было бы перевести в этот PHP-код для вашего файла functions.php:

fa_custom_setup_cdn_webfont(
  'https://pro.fontawesome.com/releases/v5.10.0/css/duotone.css',
  'sha384-R3QzTxyukP03CMqKFe0ssp5wUvBPEyy9ZspCB+Y01fEjhMwcXixTyeot+S40+AjZ'
);

fa_custom_setup_cdn_webfont(
  'https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css',
  'sha384-eHoocPgXsiuZh+Yy6+7DsKAerLXyJmu2Hadh4QYyt+8v86geixVYwFqUvMU8X90l'
);

Загрузка V4 Shims

При необходимости вы также можете добавить совместимость с версией 4 с помощью v4 shims (дословно — прокладка).

Вы должны использовать ту же версию для shims, что и для основных элементов, таких как all.css, или некоторую комбинацию fontawesome.css и стилей, таких как duotone.css, как показано выше.

Так как все наши примеры выше используют версию 5.10.0, мы будем придерживаться и этой версии в этом примере. Этот PHP должен быть добавлен в ваш functions.php в дополнение к коду, который вы добавляете для загрузки основных ресурсов Font Awesome.

fa_custom_setup_cdn_webfont(
  'https://use.fontawesome.com/releases/v5.10.0/css/v4-shims.css'
);

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