Bootstrap включает несколько десятков иконок, которые можно применять в тексте, для кнопок, в формах, в навигации и в других местах. Иконки сделаны в виде символов шрифта, поэтому могут масштабироваться в больших пределах без ухудшения качества и занимают при этом небольшой объём. Для добавления желаемой иконки обычно используется пустой элемент <i>, внутри которого пишем класс иконки. Вот, например, как на кнопку добавить символ лупы, она обычно символизирует поиск.
Хотя мы рассмотрели, что псевдоэлементы ::after и ::before выводят текст, они могут делать не только это, а выводить ещё кавычки, изображения, нумерацию и значения атрибутов. Все эти возможности заложены в свойство content, которое работает в связке с псевдоэлементами.
Иконки выводятся через псевдокласс ::before, поэтому к любому элементу достаточно добавить класс с именем иконки. Обычно применяется элемент <i>, но можно использовать и любой другой строчный элемент, например: <b>, <span> и др.
Для <i> указывается два основных класса — fa и fa-icon, где вместо icon пишется имя иконки. Все имена доступны на этой странице.
Комплект Font Awesome содержит около пяти сотен иконок. Большая часть из них никогда не будет использоваться на одном сайте, потому что на практике требуется всего несколько иконок, может быть, пара десятков, но уж точно не сотни. Поэтому имеет смысл сделать собственную сборку иконок, содержащую только необходимый набор. Тем самым мы избавляемся от избыточной информации и сокращаем объём пересылаемых пользователю файлов.