Bootstrap 字體圖標(biāo)

2022-05-21 15:18 更新

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.css 和 bootstrap-min.css 文件上。

字體圖標(biāo)列表

點(diǎn)擊這里，查看可用的字體圖標(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; 獲得跨瀏覽器的一致性。

提示：-webkit-font-smoothing和-moz-osx-font-smoothing屬性可以使頁(yè)面上的字體反鋸齒，使用后字體看起來會(huì)更清晰舒服。

然后，這里的

.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)，只需要簡(jiǎn)單地使用下面的代碼即可。請(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  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" ></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  rel="external nofollow" target="_blank"  rel="stylesheet">
    <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" rel="external nofollow" ></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" rel="external nofollow" ></script>
    <!-- 包含了所有編譯插件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js" rel="external nofollow" ></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)列表

圖標(biāo)類名實(shí)例
ico_list.jpgglyphicon 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嘗試一下
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)