Bootstrap 字體圖標


本章將講解字體圖示(Glyphicons)，並透過一些實例了解它的使用。 Bootstrap 捆綁了 200 多種字體格式的字形。首先讓我們先來理解一下什麼是字體圖示。

什麼是字體圖示？

字體圖示是在 Web 專案中使用的圖示字體。雖然，Glyphicons Halflings 需要商業許可，但您可以透過基於專案的 Bootstrap 來免費使用這些圖示。

為了表示對圖標作者的感謝，希望您在使用時加上 GLYPHICONS 網站的連結。

取得字型圖示

我們已經在 環境安裝 章節下載了 Bootstrap 3.x 版本，並且了解它的目錄結構。在fonts 資料夾內可以找到字體圖標，它包含了下列這些檔案：

  • #glyphicons-halflings-regular.eot

  • #glyphicons-halflings-regular.svg

  • #glyphicons-halflings-regular.ttf

  • #glyphicons-halflings-regular.woff

相關的CSS 規則寫在dist 資料夾內的css 資料夾內的bootstrap.css 和bootstrap-min. css 檔案上。

字體圖示清單

點擊這裡，查看可用的字體圖示清單。

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_halflings/glyphicons-halflings-regular.svg#glyphicons_halings/glyphicons-halflings-regular.svg#glyregular') format('svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: display: inline-block;
  font-family: display: inline-block;
 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
 line-height:  font-weight: normal;
 line-height:  font- 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";
}
#

用法

如需使用圖標，只需要簡單地使用下面的程式碼即可。請在圖示和文字之間保留適當的空間。 

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

下面的實例示範如何使用字體圖示：




   Bootstrap 實例 - 使用如何字體圖示
    <連結href="http: //libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   
     ;
  
  
    
      
#       button" class="navbar-toggle" data-toggle="collapse" data-target=" .navbar-collapse">
           span class="icon-bar">
            
        
          < ;a class="navbar-brand" href="#">專案名稱
        
;
        <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>

实例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 如何使用字体图标</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
       <script src="http://libs.baidu.com/bootstrap/3.0.3/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>

執行實例 »

點擊 "執行實例" 按鈕查看線上實例

#

定制字体图标

我们已经看到如何使用字体图标，接下来我们看看如何定制字体图标。

我们将以上面的实例开始，并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

下面是开始的代码：

<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">lt;span class="glyphicon glyphicon-user">lt; #</button>

應用文字陰影

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

線上定製字體圖示

圖示清單

<td

<t

##glyphicon glyphicon-cloud 試試看#glyphicon glyphicon-envelope試試看##glyphicon glyphicon-pencil試試看glyphicon glyphicon-glass試試看glyphicon glyphicon-music試試glyphicon glyphicon-search試試看glyphicon glyphicon-heart試試看試試看試試看##glyphicon glyphicon-film##glyphicon glyphicon-th-large #glyphicon glyphicon-th#glyphicon glyphicon-th-list##glyphicon glyphicon-zoom-out 試試看#glyphicon glyphicon-offglyphicon glyphicon-trashglyphicon glyphicon-homeglyphicon 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-facetime-video 試試看#glyphicon glyphicon-picture試試看##glyphicon glyphicon-map-marker試試看## glyphicon glyphicon-check試試看#glyphicon glyphicon-move#試試看glyphicon glyphicon-step-backward試試看glyphicon glyphicon-fast-backward試試看試試看試試看試試看試試看試試看##glyphicon glyphicon-plus-sign 試試看#glyphicon glyphicon-minus-sign試試看glyphicon glyphicon-remove-sign試試看#glyphicon glyphicon-ok-sign試試看試試看##glyphicon glyphicon-ok -circle試試看#glyphicon glyphicon-ban-circle試試看glyphicon glyphicon-arrow-left嘗試##glyphicon glyphicon-arrow-right試試看##glyphicon glyphicon-plane試試看glyphicon glyphicon-calendar#試試看glyphicon glyphicon-random試試看glyphicon glyphicon-comment#試試看 glyphicon glyphicon-magnet嘗試#glyphicon glyphicon-chevron-upglyphicon glyphicon-chevron-up試試看glyphicon glyphicon-chevron-down試試看glyphicon glyphicon-retweet試試看嘗試##試試嘗試#嘗試##glyphicon glyphicon-thumbs-down 試試看#glyphicon glyphicon-hand-right試試看glyphicon glyphicon-hand-left試試看glyphicon glyphicon-hand-up試試看#glyphicon glyphicon-circle-arrow-down##glyphicon glyphicon-globeglyphicon glyphicon-wrench#glyphicon glyphicon-tasksglyphicon glyphicon-filter#glyphicon glyphicon-briefcaseglyphicon glyphicon-fullscreenglyphicon glyphicon-dashboard##glyphicon glyphicon-paperclip 試試看#glyphicon glyphicon-heart-empty試試看#試試看試試看試試看試試看試試看試試看glyphicon glyphicon-sort-by-attributes-altglyphicon glyphicon-unchecked #glyphicon glyphicon-expand##glyphicon glyphicon-log-in #glyphicon glyphicon-flash#glyphicon glyphicon-log-out##glyphicon glyphicon-new-window
圖示類別名稱實例
#glyphicon glyphicon-asterisk試試看
#glyphicon glyphicon-plus#試試看
glyphicon glyphicon-minus嘗試
glyphicon glyphicon-euro試試看
#glyphicon glyphicon -star
#glyphicon glyphicon-star-empty
glyphicon glyphicon-user試試看
試試看
試試看
試試看
試試看########### ######glyphicon glyphicon-ok######試試看########################glyphicon glyphicon-remove#### ##嘗試一下##################glyphicon glyphicon-zoom-in試試看
##試試看
#glyphicon glyphicon-signal試試看
glyphicon glyphicon-cog試試
glyphicon glyphicon-trash
試試
試試看
試試看
嘗試
嘗試
嘗試
# ##############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-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-adjust嘗試
glyphicon glyphicon-tint#試試看
glyphicon glyphicon-edit試試看
glyphicon glyphicon-share#嘗試
#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-question -sign試試看
#glyphicon glyphicon-info-sign試試看
glyphicon glyphicon-screenshot嘗試
##glyphicon glyphicon-remove-circle
##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 -shopping-cart
#glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
############################################################################ glyphicon glyphicon-resize-horizo​​ntal######試試看#######################glyphicon glyphicon-hdd##############glyphicon glyphicon-hdd######試試########################glyphicon glyphicon-bullhorn######試試看############## ##########glyphicon glyphicon-bell######試試看#######################glyphicon glyphicon-certificate ######嘗試##################glyphicon glyphicon-thumbs-up試試看
##glyphicon glyphicon-hand -down試試看
#glyphicon glyphicon-circle-arrow-right試試看
glyphicon glyphicon-circle-arrow-left試試看
#glyphicon glyphicon-circle-arrow-up試試看
試試看
試試看
試試看
#試試看
試試看
嘗試一下
試試看
試試看
# ####################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-collapse-down試試看
glyphicon glyphicon-collapse-up試試看
試試看
試試看
試試看
試試看#################glyphicon glyphicon-record## ####試試看########################glyphicon glyphicon-save######試試看######### ################glyphicon glyphicon-open#######試試看#################################################glyphicon glyphicon-saved嘗試


############################################## #################
→