概述
iconfont字体图标就是用字体来代替图标、图片文件的做法,并且通过字体图标可以对图标的大小、颜色等进行控制。
相对于图片图标,它减少请求次数,缓解服务器压力。
html中想要用字体图标的话,需要去下载图标来使用。这里我们以国内的阿里巴巴矢量图库为例。
下载
- 进入官网,注册登录,然后进入首页,可以直接在首页搜索你需要的图标。如下图:
或者直接图标库->官方图标库 如图:
- 找到,点击进去,如图:
-
加入库
-
下载下来
- 解压,再把解压的font_iyjbf80dvwi文件复制在项目根目录下,如图:
使用
打开font_iyjbf80dvwi文件
symbol引用
阿里平台推荐引用。
第一步:引入iconfont.js文件
第二步:加入通用的CSS代码
第三步:选择合适的图标名应用于页面。
具体操作看下图:
运行,可以看到图标出来啦