1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地。
2.解压文件。
3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/iconfont文件夹之下。
4.将下载的图标文件中的iconfont.css复制到CSS文件夹之下,与iconfont文件夹在同一层。
5.至此,目录如下:
6.双击打开iconfont.css文件,修改引用文件路径,其他部分不做修改
7.在HTML文件中引入iconfont.css文件
8.在页面上面书写<span class="iconfont"><span>标签。
9.打开阿里巴巴矢量图标库,复制图标的代码
10.将复制所得的代码添加到span元素中。
至此结束。
小结:
也可以不在新建的CSS文件夹之下在新建iconfont文件夹,那么iconfont.css文件的引用路径也不必修改,不过这样操作的话,CSS文件夹之下看起来略乱。