Как реализовать изменение цвета лого при hover, как на github?

Question

[LittleFatNinja]

можно конечно в лоб, тупо менять картинку, но как то не кошерно
посмотрел в инспекторе, у них как то через :before и content '' реализовано,но не могу понять как
UPD:
у них что то типа
content: '\f00a';
это ж типа hex число символа
это все понятно, не понятно как такое реализовать

Answer 1

[Сергей delphinpro]

.logo:hover { color: blue; }
сам лого там сделан шрифтом.

Comments

[LittleFatNinja]

та это понятно, но как это реализовать или хотя бы подробнее опишите что значит "сделан шрифтом"

[Сергей delphinpro]

LittleFatNinja: Сделайте логотип в векторе (SVG), заливаете его на fontello.com обратно скачиваете набор шрифтов и css-файлов для использования. вот и все.

[LittleFatNinja]

Сергей: спс, нашел готовый

Answer 2

[Андрей Б.]

На github иконки сделаны шрифтом, логотип в том числе.

Comments

[LittleFatNinja]

вопрос был в том, как реализовать

[Андрей Б.]

согласен, только после моего ответа можно было догадаться погуглить "иконочный шрифт"

Answer 3

[Дмитрий Шинкарь]

github использует веркорные иконки если не ошибаюсь.

Answer 4

[Ilya Korablev]

Смотрите, у них логотип сделан шрифтом (какая-то буква изображает иконку). Далее, используется следующая конструкция:

.logo{
color: blue;
}
.logo:hover{
color: steelblue
}

Держите пример.