English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной учебник Bootstrap

Bootstrap плагины

Глифические иконки Bootstrap (Glyphicons)

Эта глава расскажет о иконках шрифтов (Glyphicons) и покажет их использование через примеры. Bootstrap включает более 200 форматов шрифтов. Сначала давайте разберемся, что такое иконки шрифтов.

Что такое иконки шрифтов?

Иконки шрифтов - это шрифты, используемые в веб-проектах. Хотя,Glyphicons Halflings Требуется коммерческая лицензия, но вы можете бесплатно использовать эти иконки, основываясь на проекте Bootstrap.

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

Получение иконок шрифтов

Мы уже Установка окружения Глава 3 загрузила Bootstrap 3.x версию и understands its directory structure. In 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.

Результат показан ниже:

Навигационная панель с иконками шрифтов

Онлайн пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>导航栏的字形图标</title>
　　　　<meta　name="viewport"　content="width=device-width,　initial-scale=1.0">
　　　　<!--　Bootstrap　-->
　　　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
<style>
　body　{
	padding-top:　50px;
　　　　padding-left:　50px;
}
</style>
<![if　lt　IE　9]>
	<script　src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<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">Toggle　navigation</span>
				<span　class="icon-bar"></span>
				<span　class="icon-bar"></span>
				<span　class="icon-bar"></span>
			</button>
			<a　class="navbar-brand"　href="#">Project　name</a>
		</div>
		<div　class="collapse　navbar-collapse">
			<ul　class="nav　navbar-nav">
				<li　class="active"><a　href="#"><span　class="glyphicon　glyphicon-home"></span>　Home</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.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--　Включает все компиляторные плагины　-->
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Проверьте, посмотрите ►</

Настройка шрифта иконки

Мы уже видели, как использовать шрифт иконки, теперь посмотрим, как настроить шрифт иконки.

Мы начнем с примера выше и настроим иконку, изменяя размер шрифта, цвет и текстовый отблеск.

Ниже приведен начальный код:

<button　type="button">
　　<span></span>　User
</button>

Эффект как показано ниже:


Настройка размера шрифта

Увеличивая или уменьшая размер шрифта иконки, вы можете сделать иконку больше или меньше.

<button　type="button"　style="font-size:　60px">
　　<span></span>　User
</button>


Настройка цвета шрифта

<button　type="button"　style="color:　rgb(212,　106,　64);">
　　<span></span>　User
</button>

Применение текстового тени

<button　type="button"　style="text-shadow:　black　5px　3px　3px;">
　　<span></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Попробуйте
Выпадающее меню BootstrapУтилиты адаптивности Bootstrap