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