如何将阿里图标库导入到自己的项目中?

前言

一开始做网站时,设计师丢了一个psd过来,图片需要自己切,图标需要自己找,徘徊在font awesome和iconfont之间,最后终究还是被海量图标的iconfont吸引了,然后一直在寻找导入项目方式,最后终于找到两种办法;前提是这个iconfont你要先登录一下,才能进行下面操作;

1、如果你的项目比较小,且所需图标较少,建议使用icon官网推荐的下载单个icon的方法然后项引用图片一样的引用图标,具体方式如下:

(1)在iconfont官网搜索你想搜索的图标名;(例:菜单),顺便吐槽一下,这个上面找图标真的是心累,因为不知道图标设计师会取什么名字

如何将阿里图标库导入到自己的项目中?

(2)选中一个图标,点击下载,就是第三个红红的那个下载

如何将阿里图标库导入到自己的项目中?

(3)它会弹出对应的信息,名字啊,谁设计的呀,啥时候设计的,巴拉巴拉一些基础信息;然后你就选择对应的颜色和对应的格式将他下载下来就ok啦~

如何将阿里图标库导入到自己的项目中?

(4)最后引用就是用img标签引用啦

2、如果你的项目需要图标数量比较多,且颜色可能会变化(设计师可能不喜欢原来的设计了),你就要选择第二种,批量将图标引入到你的项目中;

(1)第一步还是在iconfont选择你需要的图标,

如何将阿里图标库导入到自己的项目中?

(2)第二步不是点下载了,而是点添加到购物车,唔,就是第一个红红的这个按钮

如何将阿里图标库导入到自己的项目中?

(3)添加完之后,你的最上角的购物车数量会蹭蹭蹭的长,然后你就点开这个购物车,看到了下面这样子

如何将阿里图标库导入到自己的项目中?

(4)点击添加至项目,如果你想一次性下载也是很ok的,因为我本身有建过项目,所以就如第一张, 可以点击新增项目,像第二张,然后你就填写项目名称,点击确定,你选择的图标就会保存到项目中了

如何将阿里图标库导入到自己的项目中?如何将阿里图标库导入到自己的项目中?

(5)就来到了项目管理界面,点击点此生成,会出现一个网址链接,选中在这个链接在新窗口粘贴,打开链接,会发现一个css文件,然后ctrl+a全选拷贝下来,在自己的项目中新建一个font.css,粘贴进去,然后引用css在所需页面上,引用标签一般用i

<i class='iconfont icon-sanjiaoright'></i>
第一个类是你拷贝的css里面统一的类名,第二个是图标名称,图表名称就在网站你的项目中,可以拷贝,css文件中也有;

如何将阿里图标库导入到自己的项目中?

如何将阿里图标库导入到自己的项目中?

(6)至于三种引用方式,我一般用的第二种,第一种和第三种在这边不多介绍,有需要可以去官网了解一下。