Bootstrap 字體圖標(biāo)(Glyphicons)

本章將講解字體圖標(biāo)(Glyphicons)，并通過(guò)一些示例了解它的使用。Bootstrap 捆綁了 200 多種字體格式的字形。首先讓我們先來(lái)理解一下什么是字體圖標(biāo)。

什么是字體圖標(biāo)？

字體圖標(biāo)是在 Web 項(xiàng)目中使用的圖標(biāo)字體。雖然，Glyphicons Halflings 需要商業(yè)許可，但是您可以通過(guò)基于項(xiàng)目的 Bootstrap 來(lái)免費(fèi)使用這些圖標(biāo)。

為了表示對(duì)圖標(biāo)作者的感謝，希望您在使用時(shí)加上 GLYPHICONS 網(wǎng)站的鏈接。

獲取字體圖標(biāo)

我們已經(jīng)在 環(huán)境安裝 章節(jié)下載了 Bootstrap 3.x 版本，并理解了它的目錄結(jié)構(gòu)。在 fonts 文件夾內(nèi)可以找到字體圖標(biāo)，它包含了下列這些文件：

  • glyphicons-halflings-regular.eot

  • glyphicons-halflings-regular.svg

  • glyphicons-halflings-regular.ttf

  • glyphicons-halflings-regular.woff

相關(guān)的 CSS 規(guī)則寫在 dist 文件夾內(nèi)的 css 文件夾內(nèi)的 bootstrap.css 和 bootstrap-min.css 文件上。

字體圖標(biāo)列表

點(diǎn)擊這里，查看可用的字體圖標(biāo)列表。

CSS 規(guī)則解釋

下面的 CSS 規(guī)則構(gòu)成 glyphicon class。

結(jié)果如下所示：

如何使用字體圖標(biāo)

帶有字體圖標(biāo)的導(dǎo)航欄

在線示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>導(dǎo)航欄的字形圖標(biāo)</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> Shop</a></li>
				<li><a href="#support"><span class="glyphicon glyphicon-headphones"></span> Support</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>
測(cè)試看看 ?/?

定制字體圖標(biāo)

我們已經(jīng)看到如何使用字體圖標(biāo)，接下來(lái)我們看看如何定制字體圖標(biāo)。

我們將以上面的示例開始，并通過(guò)改變字體尺寸、顏色和應(yīng)用文本陰影來(lái)進(jìn)行定制圖標(biāo)。

下面是開始的代碼：

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

效果如下所示：

圖片.png

定制字體尺寸

通過(guò)增加或減少圖標(biāo)的字體尺寸，您可以讓圖標(biāo)看起來(lái)更大或更小。

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

圖片.png

定制字體顏色

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

圖片.png

應(yīng)用文本陰影

<button type="button" style="text-shadow: black 5px 3px 3px;">
  <span></span> User
</button>

圖片.png

在線定制字體圖標(biāo)

點(diǎn)擊這里，定制字體圖標(biāo) ?

圖標(biāo)列表

圖標(biāo)類名實(shí)例

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嘗試一下
丰满人妻一级特黄a大片，午夜无码免费福利一级，欧美亚洲精品在线，国产婷婷成人久久Av免费高清