为什么选择阿里iconfont图标?
相比Font Awesome来说,阿里iconfont图标样式更多,更贴近国人审美,且有彩色图标,利于美化站点。
使用方法
注册并登录
在使用之前你需要去到阿里iconfont注册一个账号,操作方法如下:
![图片[1]-全站使用阿里iconfont图标库美化网站-落叶博客](https://imgs.luoyee.cn/2021/08/20210824113634132-1024x371.png)
这里需要使用Github或者微博登录
![图片[2]-全站使用阿里iconfont图标库美化网站-落叶博客](https://imgs.luoyee.cn/2021/08/20210824114547673.png)
挑选图标
这里注意尽量选全,因为之后每一次新增图标都要重新生成代码,比较麻烦
![图片[3]-全站使用阿里iconfont图标库美化网站-落叶博客](https://imgs.luoyee.cn/2021/08/20210824114831756-1024x307.png)
挑选完成后选择“添加到项目”,如果还没有项目就新建一个(记得一定要记住项目名)
![图片[4]-全站使用阿里iconfont图标库美化网站-落叶博客](https://imgs.luoyee.cn/2021/08/20210824114924997-1024x544.png)
获取代码
![图片[5]-全站使用阿里iconfont图标库美化网站-落叶博客](https://imgs.luoyee.cn/2021/08/20210824115055929-1024x375.png)
添加代码
在网站的自定义代码区域添加如下代码(这里拿子比主题为例)
<script src="这里写你刚刚复制的代码"></script>
![图片[6]-全站使用阿里iconfont图标库美化网站-落叶博客](https://imgs.luoyee.cn/2021/08/20210824115406631-1024x457.png)
使用图标
选择你想添加到网站的图标(必须在项目库里)
![图片[7]-全站使用阿里iconfont图标库美化网站-落叶博客](https://imgs.luoyee.cn/2021/08/20210824115557847-1024x478.png)
在你想要的地方,加入如下代码
<svg class="icon" aria-hidden="true"><use xlink:href="复制的图标代码"></use></svg>
如图,若你想在菜单里添加图标:
![图片[8]-全站使用阿里iconfont图标库美化网站-落叶博客](https://imgs.luoyee.cn/2021/08/20210824115716403.png)
效果图
![图片[9]-全站使用阿里iconfont图标库美化网站-落叶博客](https://imgs.luoyee.cn/2021/08/20210824115730444.png)
© 版权声明
文章版权归原作者所有,落叶博客享有发布权,未经本站允许任何人不得将此文章转载到任何其他站点等。
THE END
暂无评论内容