Как в content псевдоэлементов добавляют иконки без url?

Question

[Satir01]

Добрый день.
Сейчас часто у иконок меняют цвета при hover'e на противоположные. И делают это при помощи :before или :after, не используя при этом { content: " "; background: url("..."); }
На Superjob, например, делают как-то так:

<i class="RegUserHeaderFeedbackBLock_ico fa fa-question" title="Задать вопрос"></i>

.fa-question:before {
    content: "";
}

Вот еще пример с codrops:
<a class="hi-icon hi-icon-earth" href="#set-5">

.hi-icon-earth:before {
    content: "";
}

Подскажите что используют в content приведенных примеров и чем такой вариант лучше "классики"? Это же не jQuery?

Answer 1

[Иван Соломенников]

Это иконочные шрифты. sampleweb.ru/articles/icon-fonts

Answer 2

[Александр Аксентьев]

В контент вставляют код символа из кастомного шрифта. Код содержит иконку.
Иконка работает как буква алфавита. Т.е. без картинки, цвет меняется через color, размер через font-size ну и т.д.

А вот почему контент подставляют именно в before/after не знаю, видимо из-за каких-то особенностей обработки бразуерами.

Comments

[ukoHka]

Стилевое свойство content применяется только к псевдоэлементам :before и :after. Спецификация такая.

[Александр Аксентьев]

ukoHka: ясно, не интересовался :)

Answer 3

[Сергей Наломенко]

В content указывают какой-либо символ иконочных шрифтов. Потому и background не нужен, т. к. вся векторная информация об иконке находится в файле шрифта.