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 布局。但现在示例代码已经到位，我们将尝试使用该食谱。