为什么选择阿里iconfont图标?
相比Font Awesome来说,阿里iconfont图标样式更多,更贴近国人审美,且有彩色图标,利于美化站点。
使用方法
注册并登录
在使用之前你需要去到阿里iconfont注册一个账号,操作方法如下:
![图片[1]-全站使用阿里iconfont图标库美化网站](https://iizny.com/wp-content/uploads/2021/09/20210824113634132-1024x371-1.webp)
这里需要使用Github或者微博登录
![图片[2]-全站使用阿里iconfont图标库美化网站](https://iizny.com/wp-content/uploads/2021/09/20210824114547673.webp)
挑选图标
这里注意尽量选全,因为之后每一次新增图标都要重新生成代码,比较麻烦
![图片[3]-全站使用阿里iconfont图标库美化网站](https://iizny.com/wp-content/uploads/2021/09/20210824114831756-1024x307-1.webp)
挑选完成后选择“添加到项目”,如果还没有项目就新建一个(记得一定要记住项目名)
![图片[4]-全站使用阿里iconfont图标库美化网站](https://iizny.com/wp-content/uploads/2021/09/20210824114924997-1024x544-1.webp)
获取代码
![图片[5]-全站使用阿里iconfont图标库美化网站](https://iizny.com/wp-content/uploads/2021/09/20210824115055929-1024x375-1.webp)
添加代码
在网站的自定义代码区域添加如下代码(这里拿子比主题为例)
<script src="这里写你刚刚复制的代码"></script>
![图片[6]-全站使用阿里iconfont图标库美化网站](https://iizny.com/wp-content/uploads/2021/09/20210824115406631-1024x457-1.webp)
使用图标
选择你想添加到网站的图标(必须在项目库里)
![图片[7]-全站使用阿里iconfont图标库美化网站](https://iizny.com/wp-content/uploads/2021/09/20210824115557847-1024x478-1.webp)
在你想要的地方,加入如下代码
<svg class="icon" aria-hidden="true"><use xlink:href="复制的图标代码"></use></svg>
如图,若你想在菜单里添加图标:
![图片[8]-全站使用阿里iconfont图标库美化网站](https://iizny.com/wp-content/uploads/2021/09/20210824115716403.webp)
温馨提示:
© 版权声明
本站网络名称:
泽楠云资源博客
本站永久网址:
https://iizny.com
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ905730354删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
喜欢就支持一下吧
游客游客前天0
学习下刚刚和宝宝游客前天0
111111111111孤鸟N新朋友前天0
孤鸟N新朋友前天0
情侣N新朋友3天前0
名称:ER0学院 简介:ER0学院 - 一个可以学习编程的平台 链接:https://www.er0xy.com/ 图标:https://www.er0xy.com/wp-content/uploads/2023/05/2023050303381439.png747474游客4天前0
7474747474allblueollieN新朋友4天前0
看看是什么看看是什么allblueollieN新朋友4天前0
看看是什么看看是什么