WordPress DUX主题网站为菜单添加彩色图标(引入阿里巴巴彩色矢量图标)

打开阿里巴巴矢量图标库网址

https://www.iconfont.cn/

1、登陆网站后,点击上方“资源管理”—“我的项目”按钮,创建一个项目(名称最好为字母)

2、找到想用的图标后,鼠标指针放在图标上,点击第一个购物车标志的“添加入库”,然后再次点击页面右上方购物车标志按钮,“添加至项目”(注意选择加入刚才创建的项目)

3、之后,页面一般会自动跳转到“我的项目”(如下图),至此前期工作准备完成,接下来主要是在网站进行操作的

以DUX主题建站的WordPress网站为例:

通过管理后台,外观——DUX主题设置——自定义代码,在“自定义CSS样式”添加以下代码:

/* 彩色iconfont */
.icon{
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

在“自定义头部代码”添加以下代码:

<script src="//at.alicdn.com/t/font_2063320_4187tqdibt.js">script>

其中的“//at.alicdn.com/t/font_2063320_4187tqdibt.js”替换成您自己的,在我的项目中可以复制(参考上图)

最后,在外观——菜单——导航标签的菜单名称前,添加以下代码即可:

<svg class="icon" aria-hidden="true"><use xlink:href="#iconVIPhuiyuan"></use></svg>

代码“#iconVIPhuiyuan”中,#号后内容修改为您需要使用的图标名称(参见上图)

最后的效果如下(彩色钻石)↓↓↓

0

评论0

没有账号? 注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码