Есть несколько правильных способов отобразить направленный вниз треугольник.
Метод 1: использовать десятичную сущность HTML
HTML:
▼
Метод 2: использование шестнадцатеричной HTML-сущности
HTML:
▼
Метод 3: использовать символ напрямую
HTML:
▼
Метод 4: используйте CSS
HTML:
<span class='icon-down'></span>
CSS:
.icon-down:before {
content: "\25BC";
}
Каждый из этих трех методов должен иметь одинаковый вывод. Для других символов существуют те же три варианта. Некоторые даже имеют четвертый вариант, позволяющий использовать строковую ссылку (например, ♥ для отображения ♥).
Вы можете использовать справочный веб-сайт, такой как Unicode-table.com , чтобы найти, какие значки поддерживаются в UNICODE и каким кодам они соответствуют. Например, вы можете найти значения для направленного вниз треугольника в http://unicode -table.com / ru / 25BC / .
Обратите внимание, что этих методов достаточно только для значков, которые доступны по умолчанию в каждом браузере. Для таких символов, как ☃, ❄, ★, ☂, ☭, ⎗ или ⎘, это гораздо менее вероятно. Несмотря на то, что можно обеспечить кросс-браузерную поддержку для других символов UNICODE, процедура немного сложнее.
Если вы хотите узнать, как добавить поддержку менее распространенных символов UNICODE, см. Создание веб-шрифта с символами дополнительной многоязычной плоскости Unicode для получения дополнительной информации о том, как это сделать.
Фоновые изображения
Совершенно другая стратегия - использование фоновых изображений вместо шрифтов. Для достижения оптимальной производительности лучше всего встраивать изображение в файл CSS, кодируя его базовым образом, как указано, например, в. @ weasel5i2 и @Obsidian. Я бы порекомендовал использовать SVG, а не GIF, однако это лучше как для производительности, так и для четкости ваших символов.
Этот следующий код является base64 для и SVG-версией значка 
:
/* size: 0.9kb */
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAxNiAyOCI+PGcgaWQ9Imljb21vb24taWdub3JlIj48L2c+PHBhdGggZD0iTTE2IDE3cTAgMC40MDYtMC4yOTcgMC43MDNsLTcgN3EtMC4yOTcgMC4yOTctMC43MDMgMC4yOTd0LTAuNzAzLTAuMjk3bC03LTdxLTAuMjk3LTAuMjk3LTAuMjk3LTAuNzAzdDAuMjk3LTAuNzAzIDAuNzAzLTAuMjk3aDE0cTAuNDA2IDAgMC43MDMgMC4yOTd0MC4yOTcgMC43MDN6TTE2IDExcTAgMC40MDYtMC4yOTcgMC43MDN0LTAuNzAzIDAuMjk3aC0xNHEtMC40MDYgMC0wLjcwMy0wLjI5N3QtMC4yOTctMC43MDMgMC4yOTctMC43MDNsNy03cTAuMjk3LTAuMjk3IDAuNzAzLTAuMjk3dDAuNzAzIDAuMjk3bDcgN3EwLjI5NyAwLjI5NyAwLjI5NyAwLjcwM3oiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD48L3N2Zz4=
Когда использовать фоновые изображения или шрифты
Для многих случаев использования фоновые изображения и иконки на основе SVG в значительной степени эквивалентны с точки зрения производительности и гибкости. Чтобы решить, что выбрать, рассмотрите следующие различия:
Изображения SVG
- Они могут иметь несколько цветов
- Они могут встраивать свой собственный CSS и / или стилизоваться под HTML-документ
- Они могут быть загружены в виде отдельного файла, встроенного в CSS И встроенного в HTML
- Каждый символ представлен кодом XML или кодом base64. Вы не можете использовать символ непосредственно в редакторе кода или использовать HTML-сущность
- Многократное использование одного и того же символа подразумевает дублирование символа, когда код XML встроен в HTML. Дублирование не требуется при встраивании файла в CSS или загрузке его как отдельного файла
- Вы не можете использовать
color, font-size, line-height, background-color или другие правила стиля, связанные со шрифтами, для изменения отображения значка, но вы можете ссылаться на различные компоненты значка как фигуры по отдельности.
- Требуются некоторые знания о кодировке SVG и / или base64
- Ограничена или не поддерживается в старых версиях IE
Иконочные шрифты
- Значок может иметь только один цвет заливки, один цвет фона и т. Д.
- Значок может быть встроен в CSS или HTML. В HTML вы можете использовать символ напрямую или использовать объект HTML для его представления.
- Некоторые символы могут отображаться без использования веб-шрифта. Большинство символов не могут.
- Многократное использование одного и того же символа подразумевает дублирование символа, когда ваш персонаж встроен в HTML. При внедрении файла в CSS дублирование не требуется.
- Вы можете использовать
color, font-size, line-height, background-color или другие правила стиля, связанные со шрифтами, чтобы изменить отображение вашего значка
- Вам не нужно специальных технических знаний
- Поддержка ввсе основные браузеры, включая старые версии IE
Лично я рекомендовал бы использовать фоновые изображения только в том случае, если вам нужно несколько цветов, и эти цвета не могут быть достигнуты с помощью color, background-color и других связанных с цветом правил CSS для шрифтов.
Основным преимуществом использования изображений SVG является то, что вы можете придавать различным компонентам символа собственный стиль. Если вы встраиваете свой код SVG XML в документ HTML, это очень похоже на стилизацию HTML. Это, однако, приведет к созданию веб-страницы, которая использует как теги HTML, так и теги SVG, что может значительно снизить читабельность веб-страницы. Это также добавляет дополнительный раздув, если символ повторяется на нескольких страницах, и вам нужно учитывать, что старые версии IE не поддерживают SVG или имеют ограниченную поддержку.