Bootstrap Glyphicons

目標

字體圖標由於它的一些好處變得越來越流行了。在本教程中我們將討論如何通過 Bootstrap 3 來使用和定製 Glyphicons。我們將解釋在後台工作的 CSS 規則,這將讓您更好的了解圖標字體的工作原理。這樣,您就能熟悉除了 Glyphicons 之外的任何圖標字體設置。

什麼是 Glyphicons

Glyphicons 是在 Web 項目中使用的圖標字體。雖然,使用 Glyphicons 需要商業許可,但是您可以通過基於項目的 Bootstrap 來免費使用這些圖標。為了表示對圖標作者的感謝,希望您在使用時加上 Glyphicon 網站 的鏈接。

獲取 Glyphicons

如果您已經從 https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip 下載 Bootstrap 3(或者任何版本 3 之前的版本),您可以找到 dist 文件夾內的 fonts 文件夾內的 glyphicons。這裏有四個文件 - glyphicons-halflings-regular.eot、glyphicons-halflings-regular.svg、glyphicons-halflings-regular.ttf 和 glyphicons-halflings-regular.woff。相關的 CSS 規則寫在 dist 文件夾內的 css 文件夾內的 bootstrap.css 和 bootstrap-min.css 文件上。

如何使用 Glyphicons

一般來說,我們可以得出通過 Bootstrap 3 使用 Glyphicons 的常見語法如下

<span class="glyphicon glyphicon-*"></span>

* 可以是任意代表特定圖標的關鍵詞。下麵的實例演示了如何通過按鈕使用它。

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

在線查看實例。

實例

<!DOCTYPE html>
<html>
<head>
    <title>導航欄的字形圖標</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 50px;
            padding-left: 50px;
        }
    </style>
    <!-- HTML5 Shim 和 Respond。js IE8支持 HTML5 元素和媒體查詢 -->
    <!-- WARNING: Respond。如果你通過file://查看頁麵js將不工作 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.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的JavaScript插件是必要的) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有插件(下麵),或者所需要的單個文件 -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

在線查看實例

CSS 規則解釋

下麵的 CSS 規則構成 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 規則實際上是在找到 glyphicons 地方聲明 font-family 和位置。

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

然後,這裏的

.glyphicon:empty {
  width: 1em;
}

是空的 glyphicon。

這裏有 200 個 class,每個 class 針對一個圖標。這些 class 的常見格式如下

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

比如,在我們實例中使用的 user 圖標,它的 class 如下

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

我們已經看到如何使用它,接下來我們看看如何定製 Glyphicons。

我們將以上麵的實例開始,並通過改變字體尺寸、顏色和應用文本陰影來進行定製圖標。

下麵是開始的代碼

<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="color: rgb(212, 106, 64);">
    <span class="glyphicon glyphicon-user"></span> User
</button>

定製 Glyphicons

點擊這裏,在線定製 Glyphicons。