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

打开阿里巴巴矢量图标库网址: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_更改为自己的.js">script>

注意把“//at.alicdn.com/t/font_更改为自己的.js”替换成您自己的,在我的项目中可以复制(参考上图)

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

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

代码“#iconVIPhuiyuan”中,#号后内容修改为您需要使用的图标名称(参见上图),最后的效果见本站导航图标!

教程参考:https://at.alicdn.com/t/project/1680534/b822903a-ee00-4a0f-9b62-fc2d380cbac7.html

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