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

最新推荐文章于 2025-06-11 13:43:41 发布

快乐是一切

最新推荐文章于 2025-06-11 13:43:41 发布

阅读量871

点赞数 2

CC 4.0 BY-SA版权

分类专栏：安利文章标签：图标

本文链接：https://blog.youkuaiyun.com/weixin_42600599/article/details/97394612

安利专栏收录该内容

2 篇文章

订阅专栏

本篇文章主要是阿里图表库的初始使用记录【网址】。
使用流程大概是这样的：
    登录了之后，你根据项目创建一个图标库。
    然后直接搜索你需要的图标，选择加入这个图标库。
    在本地使用的时候，你可以吧这些图标文件下下来，或者直接在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页面中使用图标。