Как отображать шрифты значков на веб -страницах? Стиль отображения шрифта значка в HTML

Использование шрифтов значков для генерации значков имеет следующие преимущества по сравнению с значками на основе изображений:

1. БЕСПЛАТНЫЙ размер изменений

2. Свободно изменять цвет

3. Добавьте эффект тени

4.ie6 также может поддержать его

5. Поддержите другие свойства значков изображения, таких как прозрачность и вращение и т. Д.

6. Вы можете добавить атрибуты, такие как текстовый удар и фоновый загрязнение: текст, пока браузер поддерживает его.

Текстовая модификация:

<h3>

<span aria-hidden = true data-icon = &#x21dd;> </span>

Статистика

</h3>

[data-iCon]: до {

Семейство шрифта: значки; / * BYO ICON FONT, намеченный умно */

Контент: ATTR (DATA-ICON);

Говорите: нет; /* Не доверять, но эй. */

}

Индивидуальная икона:

<a href =# class = icon-alone>

<span aria-hidden = true data-icon = &#x25a8;> </span>

<span class = screen-reader-text> rss </span>

</a>

/ * Тот же CSS, что и выше, плюс */

.icon-one {

дисплей: встроенный блок; / * Chrome 19 был странным с щелчком без этого */

}

. Screen-Reader-Text { / * повторно используемый, инструментальный ящик в классе * /

позиция: абсолютно;

Верх: -9999PX;

Слева: -9999px;

}

Если вам нужно создать свой собственный Iconfont, рекомендуется использовать Iconmoon. Используя его, вы можете генерировать нужный шрифт значка, загрузив SVG или шрифты. Эта статья является онлайн -демонстрацией с использованием Iconmoon для генерации.

Пожалуйста, посетите онлайн -демонстрацию, чтобы просмотреть результаты. Надеюсь, вам понравится шрифт иконы. Если вы думаете, что значок недостаточно гладкий, вы можете рассмотреть возможность использования Cufon для обработки, чтобы сгенерированный значок был более красивой.

Источник: http://www.gbin1.com/technology/css/20120827-icon-font-usage/