Bootstrap Шрифтовые иконки (Glyphicons)
В этой главе объясняются шрифтовые иконки (Glyphicons), и на нескольких примерах вы научитесь их использовать. Bootstrap включает более 200 глифов в шрифтовом формате. Сначала давайте разберёмся, что такое шрифтовые иконки.
Что такое шрифтовые иконки?
Шрифтовые иконки — это иконочные шрифты, используемые в веб-проектах. ХотяGlyphicons Halflingsтребуют коммерческой лицензии, вы можете бесплатно использовать эти иконки через Bootstrap, входящий в проект.
Чтобы выразить благодарность авторам иконок, мы надеемся, что при их использовании вы добавите ссылку на сайт GLYPHICONS.
Получение шрифтовых иконок
В главеУстановка окружениямы уже скачали версию Bootstrap 3.x и разобрались с её структурой каталогов. В папкеfontsвы можете найти шрифтовые иконки, которые включают следующие файлы:
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
Связанные правила CSS записаны вdistпапке css внутри папкиbootstrap.cssиbootstrap-min.cssв файле.
Список шрифтовых иконок
Нажмите здесь, чтобы просмотреть список доступных шрифтовых иконок.
Объяснение правил CSS
Следующие правила CSS составляют класс glyphicon.
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
Итак, правило @font-face фактически объявляет font-family и местоположение, где находятся glyphicons.
.glyphiconКласс объявляет относительное позиционирование со смещением на 1px сверху, отображается как inline-block, объявляет шрифт, указывает font-style и font-weight как normal и устанавливает line-height равным 1. Кроме того, используйте-webkit-font-smoothing: antialiasedи-moz-osx-font-smoothing: grayscale;для кроссбраузерной согласованности.
Затем, здесь
.glyphicon:empty {
width: 1em;
}
— это пустой glyphicon.
Здесь есть 200 классов, каждый класс соответствует одной иконке. Общий формат этих классов выглядит так:
.glyphicon-keyword:before {
content: "hexvalue";
}
Например, используемая иконка пользователя имеет следующий класс:
.glyphicon-user:before {
content: "\e008";
}
Использование
Чтобы использовать иконку, просто используйте следующий код. Пожалуйста, оставляйте подходящий пробел между иконкой и текстом.
<span class="glyphicon glyphicon-search"></span>
В следующем примере показано, как использовать шрифтовые иконки:
Пример
<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span> Пользователь
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span> Пользователь
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span> Пользователь
</button>
Попробуйте »
Результат показан ниже:
Навигационная панель со шрифтовыми иконками
Пример
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Переключить навигацию</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Название проекта</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-home">Главная</span></a>
</li>
<li>
<a href="#shop">
<span class="glyphicon glyphicon-shopping-cart">Магазин</span></a>
</li>
<li>
<a href="#support">
<span class="glyphicon glyphicon-headphones">Поддержка</span></a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!--jQuery (Плагины Bootstrap должны быть включены)-->
<script src="https://cdn.static.example.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Включает все скомпилированные плагины-->
<script src="https://cdn.static.example.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Попробуйте »
Настройка шрифтовых иконок
Мы уже видели, как использовать шрифтовые иконки. Теперь давайте посмотрим, как настраивать шрифтовые иконки.
Мы начнём с приведённого выше примера и настроим иконки, изменив размер шрифта, цвет и применив тень текста.
Вот исходный код:
<button type="button" class="btn btn-primary btn-lg"> <span class="glyphicon glyphicon-user"></span> User </button>
Эффект показан ниже:
Настройка размеров шрифта
Увеличивая или уменьшая размер шрифта иконки, вы можете сделать иконку больше или меньше.
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px"> <span class="glyphicon glyphicon-user"></span> User </button>
Настройка цветов шрифта
<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);"> <span class="glyphicon glyphicon-user"></span> User </button>
Применение теней текста
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;"> <span class="glyphicon glyphicon-user"></span> User </button>
Настройка шрифтовых иконок онлайн
Нажмите здесь, чтобы настроить шрифтовые иконки »
Список значков
| Значок | Имя класса | Пример |
|---|---|---|
| glyphicon glyphicon-asterisk | Попробуйте | |
| glyphicon glyphicon-plus | Попробуйте | |
| glyphicon glyphicon-minus | Попробуйте | |
| glyphicon glyphicon-euro | Попробуйте | |
| glyphicon glyphicon-cloud | Попробуйте | |
| glyphicon glyphicon-envelope | Попробуйте | |
| glyphicon glyphicon-pencil | Попробуйте | |
| glyphicon glyphicon-glass | Попробуйте | |
| glyphicon glyphicon-music | Попробуйте | |
| glyphicon glyphicon-search | Попробуйте | |
| glyphicon glyphicon-heart | Попробуйте | |
| glyphicon glyphicon-star | Попробуйте | |
| glyphicon glyphicon-star-empty | Попробуйте | |
| glyphicon glyphicon-user | Попробуйте | |
| glyphicon glyphicon-film | Попробуйте | |
| glyphicon glyphicon-th-large | Попробуйте | |
| glyphicon glyphicon-th | Попробуйте | |
| glyphicon glyphicon-th-list | Попробуйте | |
| glyphicon glyphicon-ok | Попробуйте | |
| glyphicon glyphicon-remove | Попробуйте | |
| glyphicon glyphicon-zoom-in | Попробуйте | |
| glyphicon glyphicon-zoom-out | Попробуйте | |
| glyphicon glyphicon-off | Попробуйте | |
| glyphicon glyphicon-signal | Попробуйте | |
| glyphicon glyphicon-cog | Попробуйте | |
| glyphicon glyphicon-trash | Попробуйте | |
| glyphicon glyphicon-home | Попробуйте | |
| glyphicon glyphicon-file | Попробуйте | |
| glyphicon glyphicon-time | Попробуйте | |
| glyphicon glyphicon-road | Попробуйте | |
| glyphicon glyphicon-download-alt | Попробуйте | |
| glyphicon glyphicon-download | Попробуйте | |
| glyphicon glyphicon-upload | Попробуйте | |
| glyphicon glyphicon-inbox | Попробуйте | |
| glyphicon glyphicon-play-circle | Попробуйте | |
| glyphicon glyphicon-repeat | Попробуйте | |
| glyphicon glyphicon-refresh | Попробуйте | |
| glyphicon glyphicon-list-alt | Попробуйте | |
| glyphicon glyphicon-lock | Попробуйте | |
| glyphicon glyphicon-flag | Попробуйте | |
| glyphicon glyphicon-headphones | Попробуйте | |
| glyphicon glyphicon-volume-off | Попробуйте | |
| glyphicon glyphicon-volume-down | Попробуйте | |
| glyphicon glyphicon-volume-up | Попробуйте | |
| glyphicon glyphicon-qrcode | Попробуйте | |
| glyphicon glyphicon-barcode | Попробуйте | |
| glyphicon glyphicon-tag | Попробуйте | |
| glyphicon glyphicon-tags | Попробуйте | |
| glyphicon glyphicon-book | Попробуйте | |
| glyphicon glyphicon-bookmark | Попробуйте | |
| glyphicon glyphicon-print | Попробуйте | |
| glyphicon glyphicon-camera | Попробуйте | |
| glyphicon glyphicon-font | Попробуйте | |
| glyphicon glyphicon-bold | Попробуйте | |
| glyphicon glyphicon-italic | Попробуйте | |
| glyphicon glyphicon-text-height | Попробуйте | |
| glyphicon glyphicon-text-width | Попробуйте | |
| glyphicon glyphicon-align-left | Попробуйте | |
| glyphicon glyphicon-align-center | Попробуйте | |
| glyphicon glyphicon-align-right | Попробуйте | |
| glyphicon glyphicon-align-justify | Попробуйте | |
| glyphicon glyphicon-list | Попробуйте | |
| glyphicon glyphicon-indent-left | Попробуйте | |
| glyphicon glyphicon-indent-right | Попробуйте | |
| glyphicon glyphicon-facetime-video | Попробуйте | |
| glyphicon glyphicon-picture | Попробуйте | |
| glyphicon glyphicon-map-marker | Попробуйте | |
| glyphicon glyphicon-adjust | Попробуйте | |
| glyphicon glyphicon-tint | Попробуйте | |
| glyphicon glyphicon-edit | Попробуйте | |
| glyphicon glyphicon-share | Попробуйте | |
| glyphicon glyphicon-check | Попробуйте | |
| glyphicon glyphicon-move | Попробуйте | |
| glyphicon glyphicon-step-backward | Попробуйте | |
| glyphicon glyphicon-fast-backward | Попробуйте | |
| glyphicon glyphicon-backward | Попробуйте | |
| glyphicon glyphicon-play | Попробуйте | |
| glyphicon glyphicon-pause | Попробуйте | |
| glyphicon glyphicon-stop | Попробуйте | |
| glyphicon glyphicon-forward | Попробуйте | |
| glyphicon glyphicon-fast-forward | Попробуйте | |
| glyphicon glyphicon-step-forward | Попробуйте | |
| glyphicon glyphicon-eject | Попробуйте | |
| glyphicon glyphicon-chevron-left | Попробуйте | |
| glyphicon glyphicon-chevron-right | Попробуйте | |
| glyphicon glyphicon-plus-sign | Попробуйте | |
| glyphicon glyphicon-minus-sign | Попробуйте | |
| glyphicon glyphicon-remove-sign | Попробуйте | |
| glyphicon glyphicon-ok-sign | Попробуйте | |
| glyphicon glyphicon-question-sign | Попробуйте | |
| glyphicon glyphicon-info-sign | Попробуйте | |
| glyphicon glyphicon-screenshot | Попробуйте | |
| glyphicon glyphicon-remove-circle | Попробуйте | |
| glyphicon glyphicon-ok-circle | Попробуйте | |
| glyphicon glyphicon-ban-circle | Попробуйте | |
| glyphicon glyphicon-arrow-left | Попробуйте | |
| glyphicon glyphicon-arrow-right | Попробуйте | |
| glyphicon glyphicon-arrow-up | Попробуйте | |
| glyphicon glyphicon-arrow-down | Попробуйте | |
| glyphicon glyphicon-share-alt | Попробуйте | |
| glyphicon glyphicon-resize-full | Попробуйте | |
| glyphicon glyphicon-resize-small | Попробуйте | |
| glyphicon glyphicon-exclamation-sign | Попробуйте | |
| glyphicon glyphicon-gift | Попробуйте | |
| glyphicon glyphicon-leaf | Попробуйте | |
| glyphicon glyphicon-fire | Попробуйте | |
| glyphicon glyphicon-eye-open | Попробуйте | |
| glyphicon glyphicon-eye-close | Попробуйте | |
| glyphicon glyphicon-warning-sign | Попробуйте | |
| glyphicon glyphicon-plane | Попробуйте | |
| glyphicon glyphicon-calendar | Попробуйте | |
| glyphicon glyphicon-random | Попробуйте | |
| glyphicon glyphicon-comment | Попробуйте | |
| glyphicon glyphicon-magnet | Попробуйте | |
| glyphicon glyphicon-chevron-up | Попробуйте | |
| glyphicon glyphicon-chevron-down | Попробуйте | |
| glyphicon glyphicon-retweet | Попробуйте | |
| glyphicon glyphicon-shopping-cart | Попробуйте | |
| glyphicon glyphicon-folder-close | Попробуйте | |
| glyphicon glyphicon-folder-open | Попробуйте | |
| glyphicon glyphicon-resize-vertical | Попробуйте | |
| glyphicon glyphicon-resize-horizontal | Попробуйте | |
| glyphicon glyphicon-hdd | Попробуйте | |
| glyphicon glyphicon-bullhorn | Попробуйте | |
| glyphicon glyphicon-bell | Попробуйте | |
| glyphicon glyphicon-certificate | Попробуйте | |
| glyphicon glyphicon-thumbs-up | Попробуйте | |
| glyphicon glyphicon-thumbs-down | Попробуйте | |
| glyphicon glyphicon-hand-right | Попробуйте | |
| glyphicon glyphicon-hand-left | Попробуйте | |
| glyphicon glyphicon-hand-up | Попробуйте | |
| glyphicon glyphicon-hand-down | Попробуйте | |
| glyphicon glyphicon-circle-arrow-right | Попробуйте | |
| glyphicon glyphicon-circle-arrow-left | Попробуйте | |
| glyphicon glyphicon-circle-arrow-up | Попробуйте | |
| glyphicon glyphicon-circle-arrow-down | Попробуйте | |
| glyphicon glyphicon-globe | Попробуйте | |
| glyphicon glyphicon-wrench | Попробуйте | |
| glyphicon glyphicon-tasks | Попробуйте | |
| glyphicon glyphicon-filter | Попробуйте | |
| glyphicon glyphicon-briefcase | Попробуйте | |
| glyphicon glyphicon-fullscreen | Попробуйте | |
| glyphicon glyphicon-dashboard | Попробуйте | |
| glyphicon glyphicon-paperclip | Попробуйте | |
| glyphicon glyphicon-heart-empty | Попробуйте | |
| glyphicon glyphicon-link | Попробуйте | |
| glyphicon glyphicon-phone | Попробуйте | |
| glyphicon glyphicon-pushpin | Попробуйте | |
| glyphicon glyphicon-usd | Попробуйте | |
| glyphicon glyphicon-gbp | Попробуйте | |
| glyphicon glyphicon-sort | Попробуйте | |
| glyphicon glyphicon-sort-by-alphabet | Попробуйте | |
| glyphicon glyphicon-sort-by-alphabet-alt | Попробуйте | |
| glyphicon glyphicon-sort-by-order | Попробуйте | |
| glyphicon glyphicon-sort-by-order-alt | Попробуйте | |
| glyphicon glyphicon-sort-by-attributes | Попробуйте | |
| glyphicon glyphicon-sort-by-attributes-alt | Попробуйте | |
| glyphicon glyphicon-unchecked | Попробуйте | |
| glyphicon glyphicon-expand | Попробуйте | |
| glyphicon glyphicon-collapse-down | Попробуйте | |
| glyphicon glyphicon-collapse-up | Попробуйте | |
| glyphicon glyphicon-log-in | Попробуйте | |
| glyphicon glyphicon-flash | Попробуйте | |
| glyphicon glyphicon-log-out | Попробуйте | |
| glyphicon glyphicon-new-window | Попробуйте | |
| glyphicon glyphicon-record | Попробуйте | |
| glyphicon glyphicon-save | Попробуйте | |
| glyphicon glyphicon-open | Попробуйте | |
| glyphicon glyphicon-saved | Попробуйте | |
| glyphicon glyphicon-import | Попробуйте | |
| glyphicon glyphicon-export | Попробуйте | |
| glyphicon glyphicon-send | Попробуйте | |
| glyphicon glyphicon-floppy-disk | Попробуйте | |
| glyphicon glyphicon-floppy-saved | Попробуйте | |
| glyphicon glyphicon-floppy-remove | Попробуйте | |
| glyphicon glyphicon-floppy-save | Попробуйте | |
| glyphicon glyphicon-floppy-open | Попробуйте | |
| glyphicon glyphicon-credit-card | Попробуйте | |
| glyphicon glyphicon-transfer | Попробуйте | |
| glyphicon glyphicon-cutlery | Попробуйте | |
| glyphicon glyphicon-header | Попробуйте | |
| glyphicon glyphicon-compressed | Попробуйте | |
| glyphicon glyphicon-earphone | Попробуйте | |
| glyphicon glyphicon-phone-alt | Попробуйте | |
| glyphicon glyphicon-tower | Попробуйте | |
| glyphicon glyphicon-stats | Попробуйте | |
| glyphicon glyphicon-sd-video | Попробуйте | |
| glyphicon glyphicon-hd-video | Попробуйте | |
| glyphicon glyphicon-subtitles | Попробуйте | |
| glyphicon glyphicon-sound-stereo | Попробуйте | |
| glyphicon glyphicon-sound-dolby | Попробуйте | |
| glyphicon glyphicon-sound-5-1 | Попробуйте | |
| glyphicon glyphicon-sound-6-1 | Попробуйте | |
| glyphicon glyphicon-sound-7-1 | Попробуйте | |
| glyphicon glyphicon-copyright-mark | Попробуйте | |
| glyphicon glyphicon-registration-mark | Попробуйте | |
| glyphicon glyphicon-cloud-download | Попробуйте | |
| glyphicon glyphicon-cloud-upload | Попробуйте | |
| glyphicon glyphicon-tree-conifer | Попробуйте | |
| glyphicon glyphicon-tree-deciduous | Попробуйте |