На мой взгляд изящнее всего подключать символы шрифта именно средствами css, без встраивания в код html. Предположим вы используете в своем дизайне Font Awesome или любой другой шрифт, но я буду описывать именно на его примере.
Для выполнения данной задачи нам потребуется знать юникод подключаемого символа. У Font Awesome его можно узнать кликнув по необходимой иконке и перейдя на страницу с подробной информацией о ней прочитать в строке после слова…
Unicode: f215
В данном случае юникодом этой иконки является номер f215
И так, приступим к практической части.
У нас есть классы к которые должны отображаться на странице иконками:
<section class="css-icons">
<div class="robots"></div>
<div class="love"></div>
<div class="css"></div>
</section>
Все что нужно сделать, указать название шрифта который используется и присвоить необходимому классу псевдоэлемент after предназначенный для вывода контента после содержимого элемента к которому он будет добавлен. Или использовать псевдоэлемент before, то же самое с разницей вывода перед содержимым элемента, кому как нравится.
Вот таким образом:
.robots::after {
font-family:'FontAwesome';
content:"\f215";
}
.love::after {
font-family:'FontAwesome';
content:"\f004";
}
.css::after {
font-family:'FontAwesome';
content:"\f13c";
}
Как видите, перед юникодом необходим обратный слеш.