Joomla 3.x. 如何替换字体Awesome图标(通过改变他们的代码)

Amina Freinger August 12, 2015

fontawesome icon joomla

Rating: 5.0/5. From 1 vote.

Please wait...

在本教程中，您将学习替换的方法很棒的图标通过更改Joomla 3中的代码.x. templates.

Joomla 3.x. 如何替换字体Awesome图标(通过改变他们的代码)

的图标 screenshot 下面是很棒的图标:

图标是通过CSS代码加载的. To change the 很棒的图标您应该执行以下步骤:

使用Firebug developer检查所需的图标 software. 您可以找到有关如何使用Firebug的更多信息 here. 在我们的例子中，图标是通过下面的CSS代码加载的 template.css file:
```
.location .address:before {
  content: "\f015";
}
```
注意:在Firebug窗口中，CSS代码的“content”属性值可以表示为一个小方块(这是由Firebug插件功能引起的)。, 但是，它在CSS文件本身中看起来会很好.
现在你应该打开 template.css 文件编辑其中的CSS代码. 你可以通过Joomla管理面板访问CSS文件(Extensions -> Template Manager -> Templates -> select your theme from the list -> open CSS 文件夹(从左列表)或via FTP or File Manager (模板/ themeXXXX / css / directory 在您的服务器上，其中XXXX是您的主题的编号).
在编辑CSS代码之前，你应该检查模板中使用的字体Awesome版本. 您可以在打开的CSS文件的顶部看到它(参见 screenshot below):

注意:一定要指定模板中使用的字体Awesome版本的图标. 否则他们不会出现.
您可以使用搜索引擎，以找到图标的字体Awesome的适当版本. 只需使用以下关键字进行搜索: Font Awesome 4.3.0 Cheatsheet. 请注意…….3.0是的版本字体很棒的图标 (您的模板可能有另一个很棒的图标 version). 打开搜索结果中的第一个链接:
我们可以看到一个图标列表和适当的图标代码. 让我们把图标改成 fa-bank icon. 复制选定图标代码的一部分. 你的图标应该有类似的代码 f19c:
然后找到所需的 CSS rule in the opened template.css file (you can check the code line in Firebug window; it is the line 12810 in our case). 然后将图标代码粘贴到 CSS rule with the 开头是反斜杠. 在我们的例子中是修改过的 CSS rule looks like on the screenshot below:
将更改保存在文件中，并刷新页面以查看更改.

我们可以看到图标被成功更改: