亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

directory search
Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類 Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實(shí)例:堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例:手機(jī)、平板電腦、臺(tái)式電腦 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例:中型和大型設(shè)備 Bootstrap 響應(yīng)式實(shí)用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標(biāo)簽 Bootstrap 超大屏幕(Jumbotron) Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對(duì)象(Media Object) Bootstrap 分頁 Bootstrap 徽章(Badges) Bootstrap 進(jìn)度條 Bootstrap 警告(Alerts) Bootstrap 列表組 Bootstrap 面板(Panels) Bootstrap 面包屑導(dǎo)航(Breadcrumbs) Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單(Dropdowns) Bootstrap 頁面標(biāo)題(Page Header) Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕(Button) Bootstrap 標(biāo)簽頁(Tab) Bootstrap 插件概覽 Bootstrap 彈出框(Popover) Bootstrap 附加導(dǎo)航(Affix) Bootstrap 滾動(dòng)監(jiān)聽(Scrollspy) Bootstrap 過渡效果(Transition) Bootstrap 警告框(Alert) Bootstrap 輪播(Carousel) Bootstrap 模態(tài)框(Modal)插件 Bootstrap 提示工具(Tooltip) Bootstrap 下拉菜單(Dropdown) Bootstrap 折疊(Collapse) Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
characters

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


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


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

字體圖標(biāo)是在 Web 項(xiàng)目中使用的圖標(biāo)字體。雖然,Glyphicons Halflings 需要商業(yè)許可,但是您可以通過基于項(xiàng)目的 Bootstrap 來免費(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.cssbootstrap-min.css 文件上。

字體圖標(biāo)在線生成

圖標(biāo)定制生成


CSS 規(guī)則解釋

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

@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 規(guī)則實(shí)際上是在找到 glyphicons 地方聲明 font-family 和位置。

.glyphicon class 聲明一個(gè)從頂部偏移 1px 的相對(duì)位置,呈現(xiàn)為 inline-block,聲明字體,規(guī)定 font-style 和 font-weight 為 normal,設(shè)置行高為 1。除此之外,使用 -webkit-font-smoothing: antialiased-moz-osx-font-smoothing: grayscale; 獲得跨瀏覽器的一致性。

然后,這里的

.glyphicon:empty?{
??width:?1em;
}

是空的 glyphicon。

這里有 200 個(gè) class,每個(gè) class 針對(duì)一個(gè)圖標(biāo)。這些 class 的常見格式如下:

.glyphicon-keyword:before?{
??content:?"hexvalue";
}

比如,使用的 user 圖標(biāo),它的 class 如下:

.glyphicon-user:before?{
??content:?"\e008";
}



用法

如需使用圖標(biāo),只需要簡單地使用下面的代碼即可。請(qǐng)?jiān)趫D標(biāo)和文本之間保留適當(dāng)?shù)目臻g。

<span?class="glyphicon?glyphicon-search"></span>


下面的實(shí)例演示了如何使用字體圖標(biāo):

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?如何使用字體圖標(biāo)</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<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>?User
</button>
<button?type="button"?class="btn?btn-default?btn-sm">
??<span?class="glyphicon?glyphicon-user"></span>?User
</button>
<button?type="button"?class="btn?btn-default?btn-xs">
??<span?class="glyphicon?glyphicon-user"></span>?User
</button>


</body>
</html>


結(jié)果如下所示:

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

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

<!DOCTYPE?html>
<html>
??<head>
????<title>導(dǎo)航欄的字體圖標(biāo)</title>
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<!--?Bootstrap?-->
????<link?>
????<style>
????body?{
????padding-top:?50px;
????padding-left:?50px;
????}
????</style>
????<!--[if?lt?IE?9]>
??????<script?src="http://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">Home</span></a></li>
????????????<li><a?href="#shop"><span?class="glyphicon?glyphicon-shopping-cart">Shop</span></a></li>
????????????<li><a?href="#support"><span?class="glyphicon?glyphicon-headphones">Support</span></a></li>
??????????</ul>
????????</div><!--?/.nav-collapse?-->
??????</div><!--?/.container?-->
????</div>
????<!--?jQuery?(Bootstrap?插件需要引入)?-->
????<script?src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
????<!--?包含了所有編譯插件?-->
????<script?src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
??</body>
</html>



定制字體圖標(biāo)

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

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

下面是開始的代碼:

<button?type="button"?class="btn?btn-primary?btn-lg">
??<span?class="glyphicon?glyphicon-user"></span>?User
</button>


效果如下所示:

定制字體尺寸

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

<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>

應(yīng)用文本陰影

<button?type="button"?class="btn?btn-primary?btn-lg"?style="text-shadow:?black?5px?3px?3px;">
??<span?class="glyphicon?glyphicon-user"></span>?User
</button>


圖標(biāo)列表

圖標(biāo) 類名 實(shí)例
glyphicon glyphicon-asterisk 實(shí)例 ?
glyphicon glyphicon-plus 實(shí)例 ?
glyphicon glyphicon-minus 實(shí)例 ?
glyphicon glyphicon-euro 實(shí)例 ?
glyphicon glyphicon-cloud 實(shí)例 ?
glyphicon glyphicon-envelope 實(shí)例 ?
glyphicon glyphicon-pencil 實(shí)例 ?
glyphicon glyphicon-glass 實(shí)例 ?
glyphicon glyphicon-music 實(shí)例 ?
glyphicon glyphicon-search 實(shí)例 ?
glyphicon glyphicon-heart 實(shí)例 ?
glyphicon glyphicon-star 實(shí)例 ?
glyphicon glyphicon-star-empty 實(shí)例 ?
glyphicon glyphicon-user 實(shí)例 ?
glyphicon glyphicon-film 實(shí)例 ?
glyphicon glyphicon-th-large 實(shí)例 ?
glyphicon glyphicon-th 實(shí)例 ?
glyphicon glyphicon-th-list 實(shí)例 ?
glyphicon glyphicon-ok 實(shí)例 ?
glyphicon glyphicon-remove 實(shí)例 ?
glyphicon glyphicon-zoom-in 實(shí)例 ?
glyphicon glyphicon-zoom-out 實(shí)例 ?
glyphicon glyphicon-off 實(shí)例 ?
glyphicon glyphicon-signal 實(shí)例 ?
glyphicon glyphicon-cog 實(shí)例 ?
glyphicon glyphicon-trash 實(shí)例 ?
glyphicon glyphicon-home 實(shí)例 ?
glyphicon glyphicon-file 實(shí)例 ?
glyphicon glyphicon-time 實(shí)例 ?
glyphicon glyphicon-road 實(shí)例 ?
glyphicon glyphicon-download-alt 實(shí)例 ?
glyphicon glyphicon-download 實(shí)例 ?
glyphicon glyphicon-upload 實(shí)例 ?
glyphicon glyphicon-inbox 實(shí)例 ?
glyphicon glyphicon-play-circle 實(shí)例 ?
glyphicon glyphicon-repeat 實(shí)例 ?
glyphicon glyphicon-refresh 實(shí)例 ?
glyphicon glyphicon-list-alt 實(shí)例 ?
glyphicon glyphicon-lock 實(shí)例 ?
glyphicon glyphicon-flag 實(shí)例 ?
glyphicon glyphicon-headphones 實(shí)例 ?
glyphicon glyphicon-volume-off 實(shí)例 ?
glyphicon glyphicon-volume-down 實(shí)例 ?
glyphicon glyphicon-volume-up 實(shí)例 ?
glyphicon glyphicon-qrcode 實(shí)例 ?
glyphicon glyphicon-barcode 實(shí)例 ?
glyphicon glyphicon-tag 實(shí)例 ?
glyphicon glyphicon-tags 實(shí)例 ?
glyphicon glyphicon-book 實(shí)例 ?
glyphicon glyphicon-bookmark 實(shí)例 ?
glyphicon glyphicon-print 實(shí)例 ?
glyphicon glyphicon-camera 實(shí)例 ?
glyphicon glyphicon-font 實(shí)例 ?
glyphicon glyphicon-bold 實(shí)例 ?
glyphicon glyphicon-italic 實(shí)例 ?
glyphicon glyphicon-text-height 實(shí)例 ?
glyphicon glyphicon-text-width 實(shí)例 ?
glyphicon glyphicon-align-left 實(shí)例 ?
glyphicon glyphicon-align-center 實(shí)例 ?
glyphicon glyphicon-align-right 實(shí)例 ?
glyphicon glyphicon-align-justify 實(shí)例 ?
glyphicon glyphicon-list 實(shí)例 ?
glyphicon glyphicon-indent-left 實(shí)例 ?
glyphicon glyphicon-indent-right 實(shí)例 ?
glyphicon glyphicon-facetime-video 實(shí)例 ?
glyphicon glyphicon-picture 實(shí)例 ?
glyphicon glyphicon-map-marker 實(shí)例 ?
glyphicon glyphicon-adjust 實(shí)例 ?
glyphicon glyphicon-tint 實(shí)例 ?
glyphicon glyphicon-edit 實(shí)例 ?
glyphicon glyphicon-share 實(shí)例 ?
glyphicon glyphicon-check 實(shí)例 ?
glyphicon glyphicon-move 實(shí)例 ?
glyphicon glyphicon-step-backward 實(shí)例 ?
glyphicon glyphicon-fast-backward 實(shí)例 ?
glyphicon glyphicon-backward 實(shí)例 ?
glyphicon glyphicon-play 實(shí)例 ?
glyphicon glyphicon-pause 實(shí)例 ?
glyphicon glyphicon-stop 實(shí)例 ?
glyphicon glyphicon-forward 實(shí)例 ?
glyphicon glyphicon-fast-forward 實(shí)例 ?
glyphicon glyphicon-step-forward 實(shí)例 ?
glyphicon glyphicon-eject 實(shí)例 ?
glyphicon glyphicon-chevron-left 實(shí)例 ?
glyphicon glyphicon-chevron-right 實(shí)例 ?
glyphicon glyphicon-plus-sign 實(shí)例 ?
glyphicon glyphicon-minus-sign 實(shí)例 ?
glyphicon glyphicon-remove-sign 實(shí)例 ?
glyphicon glyphicon-ok-sign 實(shí)例 ?
glyphicon glyphicon-question-sign 實(shí)例 ?
glyphicon glyphicon-info-sign 實(shí)例 ?
glyphicon glyphicon-screenshot 實(shí)例 ?
glyphicon glyphicon-remove-circle 實(shí)例 ?
glyphicon glyphicon-ok-circle 實(shí)例 ?
glyphicon glyphicon-ban-circle 實(shí)例 ?
glyphicon glyphicon-arrow-left 實(shí)例 ?
glyphicon glyphicon-arrow-right 實(shí)例 ?
glyphicon glyphicon-arrow-up 實(shí)例 ?
glyphicon glyphicon-arrow-down 實(shí)例 ?
glyphicon glyphicon-share-alt 實(shí)例 ?
glyphicon glyphicon-resize-full 實(shí)例 ?
glyphicon glyphicon-resize-small 實(shí)例 ?
glyphicon glyphicon-exclamation-sign 實(shí)例 ?
glyphicon glyphicon-gift 實(shí)例 ?
glyphicon glyphicon-leaf 實(shí)例 ?
glyphicon glyphicon-fire 實(shí)例 ?
glyphicon glyphicon-eye-open 實(shí)例 ?
glyphicon glyphicon-eye-close 實(shí)例 ?
glyphicon glyphicon-warning-sign 實(shí)例 ?
glyphicon glyphicon-plane 實(shí)例 ?
glyphicon glyphicon-calendar 實(shí)例 ?
glyphicon glyphicon-random 實(shí)例 ?
glyphicon glyphicon-comment 實(shí)例 ?
glyphicon glyphicon-magnet 實(shí)例 ?
glyphicon glyphicon-chevron-up 實(shí)例 ?
glyphicon glyphicon-chevron-down 實(shí)例 ?
glyphicon glyphicon-retweet 實(shí)例 ?
glyphicon glyphicon-shopping-cart 實(shí)例 ?
glyphicon glyphicon-folder-close 實(shí)例 ?
glyphicon glyphicon-folder-open 實(shí)例 ?
glyphicon glyphicon-resize-vertical 實(shí)例 ?
glyphicon glyphicon-resize-horizontal 實(shí)例 ?
glyphicon glyphicon-hdd 實(shí)例 ?
glyphicon glyphicon-bullhorn 實(shí)例 ?
glyphicon glyphicon-bell 實(shí)例 ?
glyphicon glyphicon-certificate 實(shí)例 ?
glyphicon glyphicon-thumbs-up 實(shí)例 ?
glyphicon glyphicon-thumbs-down 實(shí)例 ?
glyphicon glyphicon-hand-right 實(shí)例 ?
glyphicon glyphicon-hand-left 實(shí)例 ?
glyphicon glyphicon-hand-up 實(shí)例 ?
glyphicon glyphicon-hand-down 實(shí)例 ?
glyphicon glyphicon-circle-arrow-right 實(shí)例 ?
glyphicon glyphicon-circle-arrow-left 實(shí)例 ?
glyphicon glyphicon-circle-arrow-up 實(shí)例 ?
glyphicon glyphicon-circle-arrow-down 實(shí)例 ?
glyphicon glyphicon-globe 實(shí)例 ?
glyphicon glyphicon-wrench 實(shí)例 ?
glyphicon glyphicon-tasks 實(shí)例 ?
glyphicon glyphicon-filter 實(shí)例 ?
glyphicon glyphicon-briefcase 實(shí)例 ?
glyphicon glyphicon-fullscreen 實(shí)例 ?
glyphicon glyphicon-dashboard 實(shí)例 ?
glyphicon glyphicon-paperclip 實(shí)例 ?
glyphicon glyphicon-heart-empty 實(shí)例 ?
glyphicon glyphicon-link 實(shí)例 ?
glyphicon glyphicon-phone 實(shí)例 ?
glyphicon glyphicon-pushpin 實(shí)例 ?
glyphicon glyphicon-usd 實(shí)例 ?
glyphicon glyphicon-gbp 實(shí)例 ?
glyphicon glyphicon-sort 實(shí)例 ?
glyphicon glyphicon-sort-by-alphabet 實(shí)例 ?
glyphicon glyphicon-sort-by-alphabet-alt 實(shí)例 ?
glyphicon glyphicon-sort-by-order 實(shí)例 ?
glyphicon glyphicon-sort-by-order-alt 實(shí)例 ?
glyphicon glyphicon-sort-by-attributes 實(shí)例 ?
glyphicon glyphicon-sort-by-attributes-alt 實(shí)例 ?
glyphicon glyphicon-unchecked 實(shí)例 ?
glyphicon glyphicon-expand 實(shí)例 ?
glyphicon glyphicon-collapse-down 實(shí)例 ?
glyphicon glyphicon-collapse-up 實(shí)例 ?
glyphicon glyphicon-log-in 實(shí)例 ?
glyphicon glyphicon-flash 實(shí)例 ?
glyphicon glyphicon-log-out 實(shí)例 ?
glyphicon glyphicon-new-window 實(shí)例 ?
glyphicon glyphicon-record 實(shí)例 ?
glyphicon glyphicon-save 實(shí)例 ?
glyphicon glyphicon-open 實(shí)例 ?
glyphicon glyphicon-saved 實(shí)例 ?
glyphicon glyphicon-import 實(shí)例 ?
glyphicon glyphicon-export 實(shí)例 ?
glyphicon glyphicon-send 實(shí)例 ?
glyphicon glyphicon-floppy-disk 實(shí)例 ?
glyphicon glyphicon-floppy-saved 實(shí)例 ?
glyphicon glyphicon-floppy-remove 實(shí)例 ?
glyphicon glyphicon-floppy-save 實(shí)例 ?
glyphicon glyphicon-floppy-open 實(shí)例 ?
glyphicon glyphicon-credit-card 實(shí)例 ?
glyphicon glyphicon-transfer 實(shí)例 ?
glyphicon glyphicon-cutlery 實(shí)例 ?
glyphicon glyphicon-header 實(shí)例 ?
glyphicon glyphicon-compressed 實(shí)例 ?
glyphicon glyphicon-earphone 實(shí)例 ?
glyphicon glyphicon-phone-alt 實(shí)例 ?
glyphicon glyphicon-tower 實(shí)例 ?
glyphicon glyphicon-stats 實(shí)例 ?
glyphicon glyphicon-sd-video 實(shí)例 ?
glyphicon glyphicon-hd-video 實(shí)例 ?
glyphicon glyphicon-subtitles 實(shí)例 ?
glyphicon glyphicon-sound-stereo 實(shí)例 ?
glyphicon glyphicon-sound-dolby 實(shí)例 ?
glyphicon glyphicon-sound-5-1 實(shí)例 ?
glyphicon glyphicon-sound-6-1 實(shí)例 ?
glyphicon glyphicon-sound-7-1 實(shí)例 ?
glyphicon glyphicon-copyright-mark 實(shí)例 ?
glyphicon glyphicon-registration-mark 實(shí)例 ?
glyphicon glyphicon-cloud-download 實(shí)例 ?
glyphicon glyphicon-cloud-upload 實(shí)例 ?
glyphicon glyphicon-tree-conifer 實(shí)例 ?
glyphicon glyphicon-tree-deciduous 實(shí)例 ?
Previous article: Next article: