使用图片做图标的缺点
- 需要响应时间
- 文件的尺寸较大（可用雪碧图）解决
- 需要做:hover态的响应时较为麻烦
碎片化的图标导致的显示延迟
什么是字体图标
我们使用的字体本质上也是一种图形，而字体图标则是将一些特定的内容映射成对应的图，从而达到将图标变成与文字相同的效果，可以被color、font-size等属性控制
Bootstrap中使用了字体图标。
FontAwesome则是一个独立的字体图标库。
但两者都过于庞大，有许多你可能根本用不到的图标，你可能需要自己自定义一个字体图标。
使用iconfont制作字体图标
- 登录账号
- 收集图标
- 将图标添加到某个项目
- 导出成文件
收集图标：
1.使用搜索功能
使用搜索功能
2.自己上传图标
上传图标页面
批量上传并命名
将图标添加至项目
将图标增加至购物车
添加至项目
在我的项目中查看并导出文件
如何使用字体图标？
- 引入CSS文件 （iconfont.css）
- 引入字体文件 （iconfont.eot[.svg | .ttf | .woff]
- 在HTML中使用对应的样式
iconfot.css
- font-family用于指定字体
- .iconfont是应用了该字体的类
- icon-XXX 则是对应的图标
在HTML中对应的写法
你也可以修改对应的样式，控制图标大小颜色等
网友评论