4 вида иконок для Bootstrap 4

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

Font Awesome

Ссылка на сайт. Это, наверное, самые популярные иконки из всех встречающихся и для Bootstrap 4 они подходят как нельзя лучше. Подключение достаточно простое. Качаете архив, там 2 папки, css и fonts, загружаете все это на сервер и подключаете файлы стилей.

Подключение:

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

Изменить путь в файле font-awesome.min.css:

1
2
3
4
5
6
7

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

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

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

Кнопки с иконкой в Bootstrap 4 будет выглядеть так:

<button class="btn btn-success btn-sm"><i class="fa fa-eye"></i></button>
<button class="btn btn-info btn-sm"><i class="fa fa-edit"></i></button>
<button class="btn btn-danger btn-sm"><i class="fa fa-trash-alt"></i></button>

Кнопки с текстом:

1

<button class="btn btn-success btn-sm"><i class="fa fa-eye"></i> Смотреть</button>

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

СКАЧАТЬ

Stroke 7 Icon Font Set

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

Вам нужны 2 папки, которые лежат в папке pe-icon-7-stroke.

Подключение:

<link rel="stylesheet" type="text/css" href="css/pe-icon-7-stroke.css"/>

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

<i class="pe-7s-trash"></i>

Nucleo css

Ссылка. Входят в состав CSS фреймворка Argon Design System и без особых проблем можно подружить с Bootstrap 4. Процедура аналогичная.

Подключение:

<link rel="stylesheet" type="text/css" href="css/nucleo.css"/>

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

<i class="tim-icons icon-basket-simple"></i>

Google Material icons

Ссылка. Классные иконки в большом количестве. Скачивать ничего не нужно, просто подключаете как обычные Google шрифты через CDN.

Подключение:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

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

<i class="material-icons">android</i>

В принципе ничего сложного нет в реализации иконок для Bootstrap 4. Можно попробовать все и выбрать те, которые наиболее понравятся. Если у вас есть какие-то вопросы, пожелания или предложения, то пишите их в комментариях.