Есть несколько правильных способов отобразить направленный вниз треугольник.
Способ 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/en/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.
ВВЕРХ ВНИЗ 
ВНИЗ 
UP