MediaWiki 食譜/使用 FontAwesome 圖示

Font Awesome

所以你想要在你的頁面上展示一個火箭來展示你的東西有多棒。就像這樣：http://fontawesome.io/icon/rocket/

如果你的維基支援 Font Awesome，那麼它就像<i class="fa fa-pull-left fa-5x fa-rocket" aria-hidden="true"></i>

這就是如何顯示一個Font Awesome 圖示，拉到左邊，比正常大小大 5 倍，並明確告訴螢幕閱讀器忽略該專案作為裝飾性。

Bootstrap

如果你的維基使用與bootstrap相容的主題，如Foreground (FontAwesome 4.3) 或Chameleon，那麼你也可以混合使用佈局，就像這樣（在 Vector 中不起作用）

Bootstrap 示例

     One of three columns

     Two of three columns

     Three of three columns

     Coffee

     I love coffee!!!

     cloud

     Cloud deployment means instantly available and scalable.  We can also do on-premise / local installations to meet your custom requirements.

     Blocks

     All the pieces are put together for you.  NO assembly required!

我們專門從事

易於使用的網站

協作/資料/知識/出版/文件系統

Web 應用程式

開發運營

操作方法

我發現最好的方法是修改MediaWiki:Common.js

/*To add script tags to the page we use load instead of the deprecated importScriptURI */
/* You'll need to visit the fontawesome site to get a KEY to use */
mw.loader.load('//use.fontawesome.com/aldfjsdlkfjdlskf0.js');

請注意，已棄用的 $wgUseTidy 會透過刪除空標籤來干擾 FontAwesome。

食譜

1. 在 fontawesome 網站上註冊一個唯一的嵌入程式碼。
2. 透過編輯MediaWiki:Common.js 檔案，將指令碼源新增到您的維基，您可以在其中新增對“載入”外部指令碼的呼叫
3. 在您需要的位置插入<i> 標籤。請注意，有各種預定義的大小，如 fa-1（最小）到 fa-6（最大）

更多

1. 檢視http://fontawesome.io/examples/
2. http://fontawesome.io/icons/ 圖示 (請注意，有一個新的針對 Pro 產品的 Kickstarter https://www.kickstarter.com/projects/232193852/font-awesome-5)
3. https://cdn.fontawesome.com/help#qa-icons-code
4. https://stackoverflow.com/questions/tagged/font-awesome
5. https://github.com/FortAwesome/Font-Awesome

免責宣告

在撰寫本文時，該網站不支援 FontAwesome 圖示，也不支援 Bootstrap 佈局。但現在示例程式碼已經到位，我們將嘗試使用該食譜。