阿里在线免费图标库的使用

本篇文章主要是阿里图表库的初始使用记录【网址】
使用流程大概是这样的:
    登录了之后,你根据项目创建一个图标库。
    然后直接搜索你需要的图标,选择加入这个图标库。
    在本地使用的时候,你可以吧这些图标文件下下来,或者直接在css里面使用链接,只要联网就能用了,等到本地部署的时候再下下来。

详细使用流程

1、打开网址https://www.iconfont.cn
在这里插入图片描述
一进去的界面大概是这样,然后就可以直接搜索你需要的图标。
在这里插入图片描述
选择第一个添加到库,添加了之后,在右上角一个购物车里面就会有这个图标。将需要的图标添加好之后,点击那个购物车图标。
在这里插入图片描述
在这里插入图片描述
选择添加至项目会先提示你登录(已登录不用管),登录后会提示你创建一个项目,选择已创建的项目,将图标添加到里面。
在这里插入图片描述
添加到项目中后,可以选择将图标文件下载到本地使用,也可以直接引用网络文件。
在这里插入图片描述
远程使用的时候,点击查看在线链接。然后再点击生成代码。
在这里插入图片描述
然后将这串代码复制到你本地的css文件中去,注意:在远程引用的时候需要在每个url的路径前面加一个http才能引用如: url(’//at.alicdn.com/t/font_1318125_sm3f4a6wnl.ttf’) format(‘truetype’), 需要更换为: url(‘http//at.alicdn.com/t/font_1318125_sm3f4a6wnl.ttf’) format(‘truetype’),
本地的引用使用相对路径即可。
引用好了相应文件之后,在html页面中使用图标。

<i class="iconfont">&#xe600;</i>

如上就可以在页面中显示一个图标了,class在项目的配置中,可以编辑项目更换,标签里面的代码在项目中收藏的图标下面。
在这里插入图片描述
@快乐是一切

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值