如何應用Font Awesome矢量字體圖標

Font Awesome 是一套專門爲 Twitter Boostrap 設計的圖標字體庫。這套圖標字體集幾乎囊括了網頁中可能用到的全部圖標，除了包括 Twitter Boostrap 的默認圖標外，還有社交網絡圖標、Web 應用程序圖標和編輯器圖標等等，能夠免費用於商業項目。

能夠到官方站點查看更詳細的信息和使用樣例。

下面僅記錄使用步驟：

1.到官網上下載最新版本的Font Awesome.

2.解壓文件，將其中的css和fonts文件夾拷貝到項目中，其中css文件夾中有兩個css文件(font-awesome.css和font-awesome.min.css),fonts下有有5個，以下：

3.在須要使用的html或者其它類型的頁面中引入樣式文件，以下：

<link href="css/font-awesome.css" rel="stylesheet" />

4.查看font-awesome.css文件，若是引用的是壓縮版的，就要查看那個文件了，打開文件看到第一個樣式定義以下：

@font-face {
  
font-family: 'FontAwesome';
  
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  
font-weight: normal;
  
font-style: normal;

}

 

必定注意其中的src:url()中的路徑是否是當前與當前項目的實際路徑向匹配。

4.最後在頁面中加入相應的html元素，而且按照font awesome定義好的樣式爲須要添加矢量圖標的元素指定樣式。：

<div class="list-group">
        <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
        <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
        <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
        <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
    </div>
    <i class="fa fa-spinner fa-spin"></i>
    <i class="fa fa-circle-o-notch fa-spin"></i>
    <i class="fa fa-refresh fa-spin"></i>
    <i class="fa fa-cog fa-spin"></i>
    <i class="fa fa-car"></i>
    <i class="fa fa-car fa-3x"></i>

另外，font awesome 和BootStrap結合能夠達到更好的效果。

上面的html工做效果以下：

 

測試demo下載地址：進入下載