制作网页时常遇到需要给标题之前增加示意图标,以提高阅览者认知的情况,本文将讲解如何利用阿里巴巴矢量图标库中的图标资源,为网页中的标题增加图标。
- 下载图标资源
首先在浏览器中搜索iconfont,并登陆阿里巴巴矢量图标库官方网站,(首次使用需要注册),然后在搜索框搜索需要的图标,选择合适的图标,点击购物车图标加入购物车,此时发现页面右上角购物车中会实时显示已经加入购物车的图标数量,添加了足够的图标至购物车后可以点击“购物车图标”打开购物车,将其加入“我的项目”,此处需要创建新项目,例如我创建的“test1”,然后点击“图标管理”下的“我的项目”,选择下载到本地即完成图标资源的下载。
- 将图标资源导入CSS文件
打开下载好的压缩包并解压, 生成如图文件夹,打开文件夹,复制“iconfont.css”文件至你存放CSS文件的