FANDOM


Font Awesome為您提供了可以立即自定義縮放矢量圖標的大小、顏色、陰影、以及可以利用CSS力量來完成的任何效果。

Font Awesome授權於SIL OFL 1.1。代碼授權於MIT授權條款。文檔授權於CC BY 3.0

Installation

安裝方法

加入以下CSS到你的維基上

個人全域化
w:Special:Mypage/global.css
個人化

Special:Mypage/common.css

社區化

MediaWiki:Common.css*

*注意:在2014年7月以前建立的維基,MediaWiki:Common.css的效果可能無法出現在Oasis 或 Monobook 的版面上。可參閱本頁面獲取更多信息。

@import "/load.php?mode=articles&articles=u:dev:MediaWiki:FontAwesome.css&only=styles";
在 FANDOM 上導入 CSS 頁面
這裡有許多導入 CSS 的方式,點擊「Expand」以獲取如何更有效地載入大量腳本以加快運行速度並讓裡面的代碼看起來更整潔。
如果您的 CSS 頁面有許多以@import開頭的行列,那麼您可以將它們合併!以一行代碼去載入多重腳本可以讓您的 CSS 運算得更快及整潔。以下為一個例子:左方是使用傳統@import規則的樣子;右方則是合併成一行代碼的樣子,可以看出代碼所佔的空間變小,並加快了運行速度:
傳統的導入方式 合併後的導入方式
@import url("/index.php?title=MediaWiki:LocalCSS1.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:LocalCSS2.css&action=raw&ctype=text/css");
@import url("http://dev.wikia.com/index.php?title=MediaWiki:InterWikiCSS.css&action=raw&ctype=text/css");
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css")

注意:CSS 的導入(@import)規則必須放在頁面的最上方,否則系統將不會執行。以下為一個正確放置的例子:

錯誤的示範 正確的放置方式
/* BEGINNING OF THE PAGE */
/** other styles **/
.example { 
    styling
}
 
/** imports **/
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
/* BEGINNING OF THE PAGE */
/** imports **/
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
 
/** other styles **/
.example { 
    styling
}
實際上這並不是導入 CSS 的唯一方式!您還可以透過使用 importArticles 的方式在 JavaScript 的頁面中導入 CSS 腳本。請參閱本頁面以及這個頁面了解如何導入 JavaScript 與 CSS。您也可以參閱其它有關 CSS 的實用頁面:

功能

  • 一種字體,675種圖標
  • 無需仰賴JavaScript
  • 無限縮放大小
  • 如言語般的自由
  • 僅需由CSS控制
  • 高分屏完美呈現
  • 完美兼容於其它框架設備
  • 適用於桌上型電腦
  • 無障礙兼容

FontAwesome使用方法

插入一個 <span> 標籤至 fa class. 例如: 

<span class="fa"></span>

插入icon class... 在Font Awesome.io列表上. 例如: 

<span class="fa fa-camera"></span>

打造樣式:

<span class="fa fa-camera" style="font-size:30px;color:green"></span>

歷史紀錄

版本 圖標 更新日期 更新者
4.7.0 675 May 11, 2017 DarthKitty
4.6.3 634 October 6, 2016 DarthKitty
4.5.0 605 December 14, 2015 Jose Buelvas
4.4.0 585 July 31, 2015 Jose Buelvas
4.3.0 519 February 10, 2015 Jose Buelvas
4.2.0 479 September 4, 2014 Jose Buelvas
4.1.0 439 May 15, 2014 Jose Buelvas
4.0.3 369 May 5, 2014 Jose Buelvas