全站使用阿里iconfont图标库美化网站

全站使用阿里iconfont图标库美化网站

01846

为什么选择阿里iconfont图标?

相比Font Awesome来说,阿里iconfont图标样式更多,更贴近国人审美,且有彩色图标,利于美化站点。

使用方法

注册并登录

在使用之前你需要去到阿里iconfont注册一个账号,操作方法如下:

图片[1]-全站使用阿里iconfont图标库美化网站

这里需要使用Github或者微博登录

图片[2]-全站使用阿里iconfont图标库美化网站

挑选图标

这里注意尽量选全,因为之后每一次新增图标都要重新生成代码,比较麻烦

图片[3]-全站使用阿里iconfont图标库美化网站

挑选完成后选择“添加到项目”,如果还没有项目就新建一个(记得一定要记住项目名)

图片[4]-全站使用阿里iconfont图标库美化网站

获取代码

图片[5]-全站使用阿里iconfont图标库美化网站

添加代码

在网站的自定义代码区域添加如下代码(这里拿子比主题为例)

<script src="这里写你刚刚复制的代码"></script>
图片[6]-全站使用阿里iconfont图标库美化网站

使用图标

选择你想添加到网站的图标(必须在项目库里)

图片[7]-全站使用阿里iconfont图标库美化网站

在你想要的地方,加入如下代码

<svg class="icon" aria-hidden="true"><use xlink:href="复制的图标代码"></use></svg>

如图,若你想在菜单里添加图标:

图片[8]-全站使用阿里iconfont图标库美化网站

温馨提示:

温馨提示:本文最后更新于2021-09-21 15:07:13,某些文章具有时效性,若有错误或已失效,请在下方留言或联系关泽楠
© 版权声明
THE END
喜欢就支持一下吧
点赞6赞赏
分享
评论 抢沙发
关泽楠的头像-泽楠云资源博客

昵称

取消
昵称表情代码图片