WordPress全站使用阿里巴巴Iconfont图标详细图文教程

Iconfont-阿里巴巴矢量图标是国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。可以使用GitHub帐号登录,数百万的图标免费使用,官方也提供了详细的教程

效果预览图

WordPress全站使用阿里巴巴Iconfont图标详细图文教程

教程

1.打开阿里巴巴Iconfont并登录

支持Github,新浪微博登录

2.搜索自己所需图标并加入库

WordPress全站使用阿里巴巴Iconfont图标详细图文教程

3.点开右上角库并且添加至项目如果没有项目创建一个即可

WordPress全站使用阿里巴巴Iconfont图标详细图文教程

4.生成js地址

WordPress全站使用阿里巴巴Iconfont图标详细图文教程

5.将以下代码中的链接替换为您刚刚生成的链接,放入您博客首页底部或者在主题自定义底部代码

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

6.复制你刚刚添加的小图标并且替换下面代码中

WordPress全站使用阿里巴巴Iconfont图标详细图文教程
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shouye放置小图标代码"></use></svg>

7.在导航菜单中添加图标

WordPress全站使用阿里巴巴Iconfont图标详细图文教程

大功告成试试把

                       

点击阅读全文

上一篇 2021年4月11日 pm9:37
下一篇 2021年4月12日 am11:13