Существует несколько правильных способов отображения треугольника, направленного вниз и вверх.
Метод 1: использование десятичной сущности HTML
HTML:
▲
▼
Метод 2: использование шестнадцатеричной сущности HTML
HTML:
▲
▼
Метод 3: непосредственное использование символа
HTML:
▲
▼
Метод 4: используйте CSS
HTML:
<span class='icon-up'></span>
<span class='icon-down'></span>
CSS:
.icon-up:before {
content: "\25B2";
}
.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
Шрифты значков
- Значок может иметь только один цвет заливки, один цвет фона и т. д.
- Anзначок может быть встроен в 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 или имеют ограниченную поддержку.