WordPress美化教程,图标调用阿里巴巴Iconfont图标

写在前面

作为一个站长 站点UI的美化极为重要

一个令人阅读舒适的站点能给访客带来很好的阅读体验

令大多数站长苦恼的是,单纯调用icon图标非常的单调

但是阿里巴巴Iconfont官网提供很多很好看的icon

这期博主教大家如何调用阿里巴巴Iconfont美化站点

教程开始

1.注册阿里巴巴Iconfont账号

2.首先呢,寻找自己的需要的图标,通通点进购物车

3.再把购物车的图标加入到项目,如果还未创建项目,那就新建一个就是了

4.牢记项目名称

5.代码集成

使用阿里巴巴 Iconfont图标 图标官方也有详细的教程

同时官网提供三种集成方式:Unicode、class、Symbol

对于我这种不是技术流的站长 我只弄懂了Symbol集成方法

这篇文章我主要写一些教你怎么使用Symbol集成方法

如果你喜欢其他方法可以自行研究一下

6.将刚刚新建的项目生成 Symbol 接入链接并复制

7.将代码保存在主题文件里面

将以下代码中的链接替换为您刚刚复制的链接

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

找到主题的自定义底部代码

代码要位于</body>之前,通常是JS代码,需填HTML标签

8.教你使用 Iconfont图标

在已经添加到你项目中查找图标并复制图标代码

然后按照下面的格式替换href="#iconxxx"中的图标代码

将代码插入到你需要显示图标的地方

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

这里拿我的主题简单演示一下

效果展示 是不是非常简单且奈斯

9.教程结束

如果还不会,多看几遍教程即可

感谢您的访问

© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发

请登录后发表评论