Font Awesome為您提供可縮放的矢量圖標,您可以使用CSS所提供的所有特性對它們進行更改,包括:大小、顏色、陰影或者其它任何支持的效果。

一個字庫,479個圖標

僅一個Font Awesome字庫,就包含了與網頁相關的所有形象圖標。

無需依賴JavaScript

Font Awesome完全不依賴JavaScript,因此無需擔心兼容性。

無限縮放

無論在任何尺寸下,可縮放的矢量圖形都會為您呈現出完美的圖標。

如言語一般自由

Font Awesome完全免費,哪怕是商業用途。請查看許可

CSS控制

只要CSS支持,無論顏色、大小、陰影或者其它任何效果,都可以輕易展現。

高分屏完美呈現

Font Awesome的矢量圖標,將使您的網站在視網膜級的高分屏上大放異彩。

完美兼容其它框架

盡管是為Bootstrap設計,但Font Awesome同樣能與其它框架完美協同運作。

可用于桌面系統

用于桌面系統,或需要一套完整的矢量圖,請查看備忘

可訪問性

Font Awesome loves 屏幕閱讀器和幫助使你的圖標在web上訪問。
  • 所有標志圖標都分別是其所有者的注冊商標。
  • 使用這些商標并不代表Font Awesome擁有它們。
  • 商標只應用在被提及相應的公司或產品時使用。

特別注意!

Adblock Plus 插件會通過設置“Remove Social Media Buttons”來移除 Font Awesome 的這些標志圖標。 然而我們并不會用一些特殊方法來強行顯示。如果您認為這是一個錯誤,請 向 Adblock Plus 報告這個問題。 在Adblock Plus修復這個問題之前,您需要自行修改這些圖標的類名來解決這個問題。

一句話將Font Awesome加入您的網頁中。您完全不用下載或者安裝任何東西!

  1. 將以下代碼粘貼到網頁HTML代碼的 <head> 部分.
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    

    當新版本發布時,BootstrapCDN需要一點時間來同步到最新版本。稍安勿躁 :)

  2. 參考示例,然后開始使用Font Awesome吧!

如果您使用了默認的Bootstrap CSS樣式,那么你可以使用這種方式來引入默認的Font Awesome CSS樣式。

  1. 復制整個 font-awesome 文件夾到您的項目中。
  2. 在HTML的 <head> 中引用font-awesome.min.css。
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    
  3. 參考示例,然后開始使用Font Awesome吧!

使用 官方 Font Awesome LESS Ruby Gem 可以簡單方便的將 Font Awesome LESS 集成到Rails項目中。由 @supercodepoet 維護。

  1. 將下面這行代碼加入到應用的Gemfile中:
    gem 'font-awesome-less'
    
  2. 然后執行:
    $ bundle
    
  3. 或者自行安裝:
    $ gem install font-awesome-less
    

使用 官方 Font Awesome SASS Ruby Gem 可以簡單方便的將 Font Awesome SASS 集成到Rails項目中。由 @supercodepoet 維護。

  1. 將下面這行代碼加入到應用的Gemfile中:
    gem 'font-awesome-sass'
    
  2. 然后執行:
    $ bundle
    
  3. 或者自行安裝:
    $ gem install font-awesome-sass
    

使用LESS或SASS的方法來自定義 Font Awesome 4.2.0 。

  1. 復制 font-awesome/ 目錄到您的項目中。
  2. 打開 font-awesome/less/variables.less 文件或 font-awesome/scss/_variables.scss文件 ,然后修改 @fa-font-path$fa-font-path 為您的字體目錄。
    @fa-font-path:   "../font";
    

    字體路徑是相對于編譯的CSS目錄。

  3. 如果使用了靜態編譯器,那么重新編譯LESS或SASS文件。如果沒有,那么現在應該一切OK了。
  4. 參考示例,然后開始使用Font Awesome吧!

如果需要支持IE7,那真的十分抱歉。Font Awesome從4.1.0版本開始不再支持IE7, 但更早的版本仍然支持。您可以查看 3.2.1 的IE7支持說明。 然后呢,您可以去找那個非要支持IE7的人算賬 :)

fa-camera-retro

您可以將Font Awesome圖標使用在幾乎任何地方,只需要使用CSS前綴 fa ,再加上圖標名稱。 Font Awesome是為使用內聯元素而設計的。我們通常更喜歡使用 <i> ,因為它更簡潔。 但實際上使用 <span> 才能更加語義化。

<i class="fa fa-camera-retro"></i> fa-camera-retro
  • 如果您修改了圖標容器的字體大小,圖標大小會隨之改變。同樣的變化也會發生在顏色、陰影等其它任何CSS支持的效果上。

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

使用 fa-lg (33%遞增)、fa-2xfa-3xfa-4x,或者 fa-5x 類 來放大圖標。

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
  • 如果圖標的底部和頂部被截斷了,您需要增加行高來解決此問題。

使用 fa-fw 可以將圖標設置為一個固定寬度。主要用于不同寬度圖標無法對齊的情況。 尤其在列表或導航時起到重要作用。

<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>
  • List icons
  • can be used
  • as bullets
  • in lists

使用 fa-ulfa-li 便可以簡單的將無序列表的默認符號替換掉。

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

使用 fa-border 以及 pull-rightpull-left 可以輕易構造出引用的特殊效果。

<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

使用 fa-spin 類來使任意圖標旋轉。尤其適合 fa-spinnerfa-refreshfa-cog

<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>

CSS3動畫不支持IE8-IE9。

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

使用 fa-rotate-*fa-flip-* 類可以對圖標進行任意旋轉和翻轉。

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

如果想要將多個圖標組合起來,使用 fa-stack 類作為父容器, fa-stack-1x 作為正常比例的圖標, fa-stack-2x 作為大一些的圖標。還可以使用 fa-inverse 類來切換圖標顏色。您可以在父容器中 通過添加 大圖標 類來控制整體大小。

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

Font Awesome 完全兼容 Bootstrap 的所有組件。

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-cog"></i> Settings</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"><lt;/i> Font Awesome<br>Version 4.2.0</a>

<div class="btn-group">
  <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="Password">
</div>

<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
  <span class="fa fa-caret-down"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>

您可以任意自定義修改 Font Awesome 的CSS樣式表來實現您想要的效果。

星級評定(受 CSS Tricks 所啟發)

使用Font Awesome的過程中遇到困難了?亦或碰到一個您認為沒有正確顯示的問題?很抱歉我沒有時間來一一回復大家的郵件。 不過以下方式可能對您的情況有所幫助:

  1. 您可以閱讀最新版本的怎樣起步. 它將用最簡單的方式告訴您怎樣使用Font Awesome。
  2. 查閱Stack Overflow上 Font Awesome的相關問題。其他人或許也有與您相同的問題。
  3. 在Stack Overflow上也找不到問題的答案? 那么可以提出一個新問題,然后 給我發送郵件 ,我或許有時間會看一看。

找到Font Awesome的Bug了?那么請直接在GitHub項目中報告就是了。不過請注意以下幾點:

  1. 請表現得友好一些。Font Awesome是一個有愛的地方:)
  2. 請先 搜索 一下,也許這個Bug已經有人提交過了。
  3. 在提交任何問題之前,請先閱讀由 Nicolas Gallagher 編寫的 issue guidelines
  4. 如果以上幾點都OK了,那么請 提交您的問題

新圖標幾乎都是在 Font Awesome GitHub項目中提出需求的。 如果您也需要,那么這里有一些注意事項需要看看:

  1. 請表現得友好一些。Font Awesome是一個有愛的地方;)
  2. 請先 搜索 一下,也許您想增加的圖標已經有人提交過了。
  3. 請在提出需求時注意以下幾點,萬分感激:
    • 新需求 添加標題 Icon request: 圖標名稱.
    • 舉例說明一下您需要在哪些地方用到這個圖標,怎么用?
    • 提交一兩張單色圖片,并確保這張圖片能表達您所想要的內容。
  4. 具象化的對象將會誕生出優質的圖標,而抽象的概念當然只能用抽象的內容來表現。 舉個栗子,一個來表現幸福感的圖標遠不如一個笑臉圖標好制作,也不夠直接。
您有解決Font Awesome中Bug的方法?或者您希望為它增添新的特性?非常感謝,但是也需要請您注意幾點:
  1. 請不要提交任何新圖標。
  2. Please submit all pull requests against *-wip branches.
  3. All pull requests submitted against master will be sumarily closed and this guide referenced.
  4. After doing everything above, feel free to submit a pull request.

Want to keep up with what's planned for Font Awesome? Check out our milestones on the GitHub project.

  • 適用于在以下目錄下的所有桌面和webfont文件: font-awesome/fonts/.
  • License: SIL OFL 1.1
  • URL: http://scripts.sil.org/OFL
  • 所有標志圖標都分別是其所有者的注冊商標。
  • 使用這些商標并不代表Font Awesome擁有它們。
海南飞鱼游戏技巧