fonts
Иконка шрифтов
Поиск…
Включение шрифта значка на веб-страницу
Чтобы включить шрифт значка в свой CSS, вы можете включить следующий код:
@font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.icon {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
Использование шрифта значка на веб-странице
Чтобы использовать значок в своем HTML, вы можете выполнить одно из следующих действий:
<!-- Method 1 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 2 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 3 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 4 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 5 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 6 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 7-->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use the 'content' style rule with a ':before selector' in your CSS -->
<p>I rate this movie
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star-unfilled"></span>
!!
</p>
Если вы хотите выбрать метод 7, вам понадобится дополнительный CSS-код. Этот CSS-код будет выглядеть так:
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
Значки шрифтов, таких как Iconic , шрифт Awesome или Glyphicons, как правило, используют метод 7. Это, чтобы избежать необходимости копировать специальные символы из чит-листа или принудительно использовать объекты HTML.
Это, однако, метод, который имеет несколько недостатков. Прежде всего, для этого требуется поддержка :before селектором CSS и использование escape-последовательности для символов UNICODE. Эта поддержка не поддерживается ни IE6-7, ни некоторыми версиями Webkit .
Другим недостатком является то, что для каждого значка необходимо использовать отдельный тег HTML, причем каждый тег соответствует одному символу из шрифта значка. Отображение нескольких значков в теге HTML невозможно с помощью метода 7, в отличие от других методов.
Однако другие методы имеют свои собственные недостатки. Способы 1, 3 и 5 требуют, чтобы вы скопировали символ из обложки или использовали средства, чтобы поместить символ в свой код. Возможно, ваш редактор кода не может отображать символ или может отображать другой символ, отличный от символа в шрифте значка, если шрифт значка использует нестандартное сопоставление этого символа.
Методы 1, 3 и 5 также требуют, чтобы ваш браузер использовал правильную кодировку для отображения правильного символа. Для символов UNICODE это не так очевидно, как для символов ASCII. Однако это должно быть обеспечено добавлением метатега <meta charset="utf-8" /> где-то в head вашего HTML-документа.
Методы 2, 4 и 6 не требуют, чтобы вы копировали-вставляете символ, однако он делает ваш код менее читаемым людьми и вносит какие-либо изменения в код, более подверженный человеческой ошибке. Кроме того, поскольку вам нужно будет искать код HTML-сущности для каждого из значков, которые вы хотите использовать, или вам нужно запомнить их. Хотя то же самое относится и к классам, используемым в методе 7, эти классы гораздо легче запоминать, чем код объекта HTML.
Включая определенный символ на веб-странице
Рассмотрим треугольник с нисходящей ориентацией.
Существует несколько правильных способов отображения этого символа на веб-странице.
Метод 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, вам необходимо получить шрифт значка или создать свой собственный. См. Создание собственного шрифта для получения дополнительной информации о том, как создать собственный шрифт.
Популярные иконки шрифтов
Ниже приведен список популярных шрифтов значков: