阿里巴巴矢量图标库使用步骤

1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地。

2.解压文件。

3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/iconfont文件夹之下。

阿里巴巴矢量图标库使用步骤_第1张图片

 

4.将下载的图标文件中的iconfont.css复制到CSS文件夹之下,与iconfont文件夹在同一层。

阿里巴巴矢量图标库使用步骤_第2张图片

5.至此,目录如下:

阿里巴巴矢量图标库使用步骤_第3张图片

6.双击打开iconfont.css文件,修改引用文件路径,其他部分不做修改

阿里巴巴矢量图标库使用步骤_第4张图片

7.在HTML文件中引入iconfont.css文件

8.在页面上面书写标签。

9.打开阿里巴巴矢量图标库,复制图标的代码

阿里巴巴矢量图标库使用步骤_第5张图片

10.将复制所得的代码添加到span元素中。

至此结束。

小结:

也可以不在新建的CSS文件夹之下在新建iconfont文件夹,那么iconfont.css文件的引用路径也不必修改,不过这样操作的话,CSS文件夹之下看起来略乱。

你可能感兴趣的:(CSS)