打开阿里巴巴矢量图标库网址: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