Как работает CSS свойство — content: '\e80f'?

Question

[Сергей]

Есть кнопка - войти на сайт через вконтакте, и слева логотип в псевдоэлементе before

.icon-vk:before {
    content: '\e80f';
}

Не могу понять откуда логотип сам берется, что такое \e80f ?

Answer 1

[crazyivan_ru]

Это иконочный шрифт, чтобы понять как он работает, нужно рассмотреть всю конструкцию, во-первых у рассматриваемого элемента где-то должен быть указан еще один 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.

Answer 2

[Serj-One]

Иконочный шрифт.

Comments

[Сергей]

Т.е на сайте были загружены специальные шрифты, и сюда вставили код символа? Я пример взял с сайта www.vc.ru при авторизации

[Serj-One]

Frosty 87: Да, всё верно. В вашем примере шрифт сгенерирован здесь - fontello.com

[Сергей]

спасибо