如何使用阿里巴巴iconfont图标库为html网页中的标题前添加图标

制作网页时常遇到需要给标题之前增加示意图标，以提高阅览者认知的情况，本文将讲解如何利用阿里巴巴矢量图标库中的图标资源，为网页中的标题增加图标。

1. 下载图标资源
   首先在浏览器中搜索iconfont，并登陆阿里巴巴矢量图标库官方网站，（首次使用需要注册），然后在搜索框搜索需要的图标，选择合适的图标，点击购物车图标加入购物车，此时发现页面右上角购物车中会实时显示已经加入购物车的图标数量，添加了足够的图标至购物车后可以点击“购物车图标”打开购物车，将其加入“我的项目”，此处需要创建新项目，例如我创建的“test1”，然后点击“图标管理”下的“我的项目”，选择下载到本地即完成图标资源的下载。
   
2. 将图标资源导入CSS文件
   打开下载好的压缩包并解压， 生成如图文件夹，打开文件夹，复制“iconfont.css”文件至你存放CSS文件的目录。
3. 调用图标资源
   使用编译器打开自己正在编写的CSS、HTML，此时在CSS目录中已经有了“iconfont.css”文件，打开HTML文件，在head中采用图中方式引用该CSS文件，然后在需要的标题前按照如图方式调用该图标（图标名称在“iconfont.css”中）。
   

!

该图标在CSS文件中的名称及代码
保存html后在浏览器中打开该html即完成了图标的添加，下图为笔者添加图标前后网页效果对比。


特别鸣谢CSDN博主paditang，本文参考了其《iconfont使用简易教程》
特此附其文章链接， iconfont使用简易教程