快捷方便的在线免费图标库

今天在找一个图标的时候,偶然发现了一个图标网站,是阿里出品的,【网站】。
为什么会推荐呢?主要是我觉得真的太好用了,使用流程大概是这样的:
    登录了之后,你根据项目创建一个图标库。
    然后直接搜索你需要的图标,选择加入这个图标库。
    在本地使用的时候,你可以吧这些图标文件下下来,或者直接在css里面使用链接,只要联网就能用了,等到本地部署的时候再下下来。

详细使用流程

1、打开网址https://www.iconfont.cn
快捷方便的在线免费图标库_第1张图片
一进去的界面大概是这样,然后就可以直接搜索你需要的图标。
快捷方便的在线免费图标库_第2张图片
选择第一个添加到库,添加了之后,在右上角一个购物车里面就会有这个图标。将需要的图标添加好之后,点击那个购物车图标。
在这里插入图片描述
快捷方便的在线免费图标库_第3张图片
选择添加至项目会先提示你登录(已登录不用管),登录后会提示你创建一个项目,选择已创建的项目,将图标添加到里面。
快捷方便的在线免费图标库_第4张图片
添加到项目中后,可以选择将图标文件下载到本地使用,也可以直接引用网络文件。
快捷方便的在线免费图标库_第5张图片
远程使用的时候,点击查看在线链接。然后再点击生成代码。
快捷方便的在线免费图标库_第6张图片
然后将这串代码复制到你本地的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">i>

如上就可以在页面中显示一个图标了,class在项目的配置中,可以编辑项目更换,标签里面的代码在项目中收藏的图标下面。
快捷方便的在线免费图标库_第7张图片
@快乐是一切

你可能感兴趣的:(前端,安利,图标)