本章將講解字體圖標(Glyphicons)，並經過一些實例瞭解它的使用。Bootstrap 捆綁了 200 多種字體格式的字形。首先讓咱們先來理解一下什麼是字體圖標。css
首先給你們介紹什麼是字體圖標：html
字體圖標是在 Web 項目中使用的圖標字體。字體圖標在下載的Bootstrap的fonts文件夾中。web
|
1
2
3
4
5
6
7
8
9
10
11
|
.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;
}
|
.glyphicon class 聲明一個從頂部偏移 1px 的相對位置，呈現爲 inline-block，聲明字體，規定 font-style 和 font-weight 爲 normal，設置行高爲 1。除此以外，使用-webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 得到跨瀏覽器的一致性。bootstrap
關於-webkit-font-smoothing和-moz-osx-font-smoothing：瀏覽器
-webkit-font-smoothing屬性。這個屬性能夠使頁面上的字體抗鋸齒,使用後字體看起來會更清晰舒服。字體
none ------ 對低像素的文本比較好
subpixel-antialiased ------默認值
antialiased ------抗鋸齒很好
auto
inherit ------繼承父元素
initial
-moz-osx-font-smoothing屬性,其中-osx-代表這是mozilla可貴的給特定操做系統推出的特性加強，因爲缺少文檔，目前已知的取值是：spa
grayscale ------抗鋸齒很好
auto ------默認值
inherit ------繼承操作系統
Bootstrap提供了200個字體圖標，每一個圖標對應一個class，在使用時，咱們只須要包含glyphicon和對應的class便可。.net
使用方法：code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<head>
<meta charset =
"utf-8"
>
<title>demo</title>
<link href=
"bootstrap-3.3.4-dist/css/bootstrap.min.css"
rel=
"stylesheet"
>
<style type=
"text/css"
>
body{padding: 20px;}
</style>
</head>
<body>
<span class =
"glyphicon glyphicon-lock"
></span>
<span class =
"glyphicon glyphicon-lock"
style =
"font-size:30px;"
></span>
<span class =
"glyphicon glyphicon-lock"
style =
"font-size:60px;"
></span>
</body>
</html>
|
配合button使用：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<body>
<button class=
"btn btn-default"
>
<span class =
"glyphicon glyphicon-home"
></span>
</button>
<button class=
"btn btn-success"
>
<span class =
"glyphicon glyphicon-home"
></span> Home
</button>
<button class=
"btn btn-info"
>
<span class =
"glyphicon glyphicon-home"
></span> Home
</button>
<button class=
"btn btn-warning"
>
<span class =
"glyphicon glyphicon-home"
></span> Home
</button>
<button class=
"btn btn-warning btn-lg"
>
<span class =
"glyphicon glyphicon-home"
></span> Home
</button>
<button class=
"btn btn-warning btn-sm"
>
<span class =
"glyphicon glyphicon-home"
></span> Home
</button>
</body>
|
效果：
定製字體圖標
在上一個例中，其實咱們已經實現了對字體圖標大小和顏色的定製，此處再作進一步說明。
經過改變字體的大小或button的大小，能夠改變字體圖標的大小。
經過設置color的顏色，能夠改變字體圖標的顏色，以下：
|
1
2
3
4
5
6
7
8
9
10
11
|
<body>
<button class=
"btn btn-success"
>
<span class =
"glyphicon glyphicon-home"
></span> Home
</button>
<button class=
"btn btn-success"
style=
"color:#FF0000;"
>
<span class =
"glyphicon glyphicon-home"
></span> Home
</button>
<button class=
"btn btn-success"
>
<span class =
"glyphicon glyphicon-home"
style=
"color:#FF0000;"
></span> Home
</button>
</body>
|
效果：
能夠看出：經過改變其父元素或者是span自己的color，均可以改變字體圖標的顏色。
應用文本陰影
|
1
2
3
4
5
6
7
8
9
10
11
|
<body>
<button class=
"btn btn-success"
>
<span class =
"glyphicon glyphicon-home"
></span> Home
</button>
<button class=
"btn btn-success btn-lg"
style=
"text-shadow: black 3px 2px 3px;"
>
<span class =
"glyphicon glyphicon-home"
></span> Home
</button>
<button class=
"btn btn-success btn-lg"
>
<span class =
"glyphicon glyphicon-home"
style=
"text-shadow: black 3px 2px 3px;"
></span> Home
</button>
</body>
|
更多請查看字體圖標，能夠bootstrap官方文檔：
以上內容給你們介紹了Bootstrap glyphicons字體圖標的相關知識，但願你們喜歡。