无需额外插件即可使用 Font Awesome 图标

在本教程中，我将分两步进行演示：第一步，我将向您展示如何使用 Font Awesome 图标装饰导航栏中的条目；第二步，我将向您展示如何更换各个论坛的状态图标。操作非常简单，Invision Community 内置了对 Font Awesome 的支持，您可以在这里找到当前支持的图标列表  。

如果您找到了想要使用的内容，请点击它，并在详细视图中记下其 Unicode 编码……

接下来，转到管理控制面板中的已安装主题列表，然后单击  要使用图标的主题旁边的</>符号。

然后点击 CSS 选项卡，查找模板 custom.css  ，其中通常只会显示一个未编辑主题的占位符。

要在导航中使用 FA，必须先针对此位置触发它。以下代码片段负责此操作，请将其复制到空白模板中……

引用

.ipsNavBar_primary li> a: 在之前 { 字体系列："FontAwesome"； 行高：1； 字体粗细：正常； }

好了，现在我们知道了从哪里获取图标以及将它们插入到哪里。现在我们只需要告诉主题应该在哪里显示哪个图标。

要做到这一点，请返回前端，右键单击要为其分配图标的元素，然后在上下文菜单中选择“ 查看”  ，此时浏览器将显示类似这样的界面……

本例中我们关注的是 ID  21。 现在将以下内容复制到您的模板中，保存并更新您的页面……

引用

.ipsNavBar_primary li [id = "elNavSecondary_21"]> a: before {content: "\ f198"} / * Slack * /

现在，ID 为 21 的元素应该将 FA 图标与 Unicode f198 字符关联起来，在本例中为“Slack”。对顶部导航栏中的所有其他元素执行相同的操作。子导航也一样，只是代码略有不同……

引用

.ipsNavBar_secondary li [id = "elNavSecondary_10"]> a: before {content: "\ f086"} / * 注释 * /

现在进入第二步 ，我们将专门讨论论坛的状态图标。您可以通过右键单击来查找它们的 ID，导航栏中的元素也是如此。替换论坛图标的代码稍长一些，如下所示……

引用

.ipsDataItem [data-forumid = '2'] .ipsItemStatus.ipsItemStatus_large .fa-comments :: before, .ipsItemStatus: not (.ipsItemStatus_large) .fa-comments :: before { 内容："\f198"; }

ID 号为 2 的论坛被分配了 Unicode 编码为 f198 的图标，就是这样。完成后，它可能看起来像这样……

希望这篇小指南对您有所帮助。如果您有任何疑问，请留言，我很乐意为您解答。