Как поправить before content в CSS?

Question

[c5c5]

.icon-vkontakte:before { content: '\e800'; }
.icon-facebook:before { content: '\e801'; }
.icon-twitter:before { content: '\e802'; }
.icon-youtube:before { content: '\e803'; }

На веб-странице это отображалось как чёрно-белые иконки vk, facebook и т.д.
Вопрос: где взять полный список спецсимволов в content? Потому что мне например нужно добавить иконку инстаграма например...

Answer 1

[Александр]

Это юникод-коды, они не специализированы для :content. Вы можете писать в :content любой текст. Что касается, инсты, то вам нужно искать визуализацию соответствующего кода в используемом иконками шрифте.

Comments

[Александр]

Для примера посмотрите font-awesome. Там похожий подход.

Answer 2

[SagePtr]

Зависит целиком от используемого иконочного шрифта, какой код какому глифу соответствует

Comments

[c5c5]

А внутри шрифта как узнать какой код какой иконке соответствует?

[SagePtr]

c5c5: открыть его в любом редакторе шрифтов, либо скрипт накатать, который выведет все символы от \e000 до \eb00 к примеру

[c5c5]

SagePtr: Это "великолепно" ))) Проще переделать картинками ))

[SagePtr]

c5c5: или использовать другой иконочный шрифт с документацией хотя бы. Например, FontAwesome: https://fortawesome.github.io/Font-Awesome/icons/

Answer 3

[BMO1337]

Это всё равно как ты писать будешь. Начинай с \e000 и заканчивая \eb00

Answer 4

[mr_dev1l]

Используйте font awsome и будет вам счастье