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

  • 欢迎 游客 您的光临,下载之前请先阅读 积分规则(暂行) 。任何技术问题请在论坛提问,本站定制插件、模板主题售前、售后问题请联系QQ:5916171

小关_

打酱油的路过~~
管理成员
UID
255
注册
2019/01/25
消息
449
解决方案
6
反馈评分
1,393
黄金
4,494.0G
    Windows 10 Chrome 79.0.3945.79
  • #1
cxf-navigation-tab-icons.png
进入后台-外观-模板列表
搜索extra.less该模板

将下列代码加入extra.less中:
CSS:
/* 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键)并将鼠标悬停在标签上。有关详细信息,请参见下面的图像:
cxf-navigation-tab-icons-2.png
cxf-navigation-tab-icons-2 (1).png
对于该选项卡,只需将此代码添加到您现有的代码中(例如,在上面的代码中的最后一个“}”符号之前):
代码:
   [data-nav-id="membership"]:before
   {
       font-family: FontAwesome;
       content: "\f005";
       color: #E6BB5C;
       padding-right: 5px;
   }

如何给该图标加上颜色??
下面是“论坛”选项卡的代码示例。将此代码添加到您的extra.less中,并进行编辑以满足您的需求:
CSS:
/* 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;
   }
}

效果图:
cxf-navigation-tab-icons-3.png
 
最后编辑:
UID
875
注册
2020/06/14
消息
30
反馈评分
14
黄金
1,614.0G
    Windows 10 Chrome 78.0.3904.108
  • #2
请问怎么更改这个位置的图标呢?1593947517061.png
 

小关_

打酱油的路过~~
管理成员
UID
255
注册
2019/01/25
消息
449
解决方案
6
反馈评分
1,393
黄金
4,494.0G
    Android Chrome Mobile 57.0.2987.108
  • #3
这什么位置
 
UID
382
注册
2019/06/17
消息
44
反馈评分
1
黄金
1,026.0G
    Windows 10 Chrome 85.0.4183.102
  • #6
注意,该方案不适用于使用主题的论坛。
使用主题的论坛请去对应的模块社区或者google搜索资料。