WordPress. 如何改变fontaawesome图标

本教程展示了如何进行更改 很棒的图标 in WordPress模板.

WordPress. 如何改变fontaawesome图标

1. 我们将改变后元部分的图标. 这些图标由 很棒的图标.

   

2. 使用Firebug开发人员检查图标 software. 您可以找到有关如何使用Firebug的更多信息 here. 在我们的例子中，图标有 “icon-bookmark”类. 这样的图标位于里面

   .

   

3. 现在我们应该使用CSS覆盖原来的图标代码. Open themeXXXXX/style.css file in your editor (其中XXXXXX为主题号).

   

4. 我们应该制作CSS selector which will overwrite 原始图标. 复制适当的类名. 您可以使用Firebug找到合适的类名. 在本例中是post_category.

   

5. 将类名粘贴到CSS文件中并添加 . 符号来制作CSS selector.

   

6. Copy icon code. 您可以使用Firebug查找图标代码.

   

7. Paste code to .css file. Your CSS selector 应该有相同的结构上 screenshot.

   

8. 现在我们应该在样式中指定图标代码.css file. 我们可以在Firebug中看到对外部CSS文件的引用. 正在使用该文件 字体很棒的图标.

   Note: r=3.2.1表示模板使用 字体很棒的图标 of version 3.2.1. 一定要指定合适版本的图标. 否则他们不会出现.

   

9. 您可以使用搜索引擎，以便找到相应版本的图标 很棒的图标. 只需使用以下关键字进行搜索:
   font awesome 3.2.1 cheatsheet. 请注意.2.1 is version of 字体很棒的图标 (您的模板可能有另一个版本的 很棒的图标). 用字体Awesome 3打开链接.2.1 Cheatsheet.

   

10. 我们可以看到一个图标列表和适当的图标代码. 我们把icon改成icon-warning-sign. 复制部分图标代码. 你的图标应该有类似的代码 f071.

    

11. 将图标代码粘贴到 CSS rule 以反斜杠开头. Add !important 指令，以确保原始样式将被覆盖. 在本例中，修改后的文件看起来像 screenshot below.

    

12. 保存更改并将修改后的文件上传到服务器. 刷新页面以检查页面的外观.

    

13. 我们可以看到原来的图标被样式覆盖了.css file. 请对其他图标执行相同的操作.

请随时查看下面的详细视频教程:

WordPress. 如何改变fontaawesome图标