模板修改 在导航栏中添加“Font Awesome”图标

[小关]

进入后台-外观-模板列表
搜索extra.less该模板

将下列代码加入extra.less中：

/* Navigation tab icons */
.p-navEl
{
   [data-nav-id="home"]:before
   {
       font-family: FontAwesome;
       content: "\f015";
       padding-right: 5px;
   }
   [data-nav-id="forums"]:before
   {
       font-family: FontAwesome;
       content: "\f0e6";
       padding-right: 5px;
   }
   [data-nav-id="whatsNew"]:before
   {
       font-family: FontAwesome;
       content: "\f0e7";
       padding-right: 5px;
   }
   [data-nav-id="xfmg"]:before
   {
       font-family: FontAwesome;
       content: "\f03e";
       padding-right: 5px;
   }
   [data-nav-id="xfrm"]:before
   {
       font-family: FontAwesome;
       content: "\f019";
       padding-right: 5px;
   }
   [data-nav-id="members"]:before
   {
       font-family: FontAwesome;
       content: "\f0c0";
       padding-right: 5px;
   }
}
/* Code for off-canvas (mobile) menu */
.offCanvasMenu--nav .offCanvasMenu-linkHolder
{
   [data-nav-id="home"]:before
   {
       font-family: FontAwesome;
       content: "\f015";
       padding-right: 5px;
   }
   [data-nav-id="forums"]:before
   {
       font-family: FontAwesome;
       content: "\f0e6";
       padding-right: 5px;
   }
   [data-nav-id="whatsNew"]:before
   {
       font-family: FontAwesome;
       content: "\f0e7";
       padding-right: 5px;
   }
   [data-nav-id="xfmg"]:before
   {
       font-family: FontAwesome;
       content: "\f03e";
       padding-right: 5px;
   }
   [data-nav-id="xfrm"]:before
   {
       font-family: FontAwesome;
       content: "\f019";
       padding-right: 5px;
   }
   [data-nav-id="members"]:before
   {
       font-family: FontAwesome;
       content: "\f0c0";
       padding-right: 5px;
   }
}
/**********/

上面的代码只能给您XenForo论坛的默认导航栏加入图标
想给您添加的导航栏加入图标？

使用浏览器中的inspect元素（可能是F12键）并将鼠标悬停在标签上。有关详细信息，请参见下面的图像：


对于该选项卡，只需将此代码添加到您现有的代码中（例如，在上面的代码中的最后一个“}”符号之前）：

   [data-nav-id="membership"]:before
   {
       font-family: FontAwesome;
       content: "\f005";
       color: #E6BB5C;
       padding-right: 5px;
   }

如何给该图标加上颜色？？
下面是“论坛”选项卡的代码示例。将此代码添加到您的extra.less中，并进行编辑以满足您的需求：

/* Selected tabs */
.p-navEl.is-selected
{
   [data-nav-id="forums"]:before
   {
       font-family: FontAwesome;
       content: "\f0e6";
       padding-right: 5px;
       color: #E6BB5C;
   }
}
/* Selected tabs for off-canvas (mobile) menu */
.offCanvasMenu--nav .offCanvasMenu-linkHolder.is-selected
{
   [data-nav-id="forums"]:before
   {
       font-family: FontAwesome;
       content: "\f0e6";
       padding-right: 5px;
       color: #E6BB5C;
   }
}

效果图：

 

[ShintoKosei]

请问怎么更改这个位置的图标呢？

 

[小关]

这什么位置

 

[小关]

请问怎么更改这个位置的图标呢？浏览附件2874

这是哪里

 

[BestChen]

注意，该方案不适用于使用主题的论坛。
使用主题的论坛请去对应的模块社区或者google搜索资料。