Это иконочный шрифт, чтобы понять как он работает, нужно рассмотреть всю конструкцию, во-первых у рассматриваемого элемента где-то должен быть указан еще один css параметр -
font-family, например так:
.icon-vk:before {
font-family: "название_иконочного_шрифта";
}
Теперь найдем файл стилей этого иконочного шрифта (обычно по названию понятно), в нем, в самом начале, будет подключение исходных файлов шрифта (eot, otf, woff, svg и пр.), обычно оно выглядит так:
@font-face {
font-family: "название_иконочного_шрифта";
src: url("путь_до файла_eot");
src: url("путь_до файла_ttf") format("truetype"), url("путь_до файла_woff") format("woff"), url("путь_до файла_svg?") format("svg");
font-weight: normal;
font-style: normal;
}
В этих файлах хранятся как раз те самые иконки, которые выводятся шрифтом, и хранятся они в символах с названиями вида
\e80f, и, соответственно, чтобы вывести какой-то символ, нужно использовать конструкцию вида:
.icon-vk:before {
content: '\e80f';
}
Псевдоклассы
:before (или, иногда,
:after) используются для того, чтобы сохранить работоспособность механизма на тот случай, если элементы сайта динамически формируются, например, PHP функцией, и нет прямой возможности редактировать HTML.