IconFont

使用图片做图标的缺点

  1. 需要响应时间
  2. 文件的尺寸较大(可用雪碧图)解决
  3. 需要做:hover态的响应时较为麻烦
IconFont_第1张图片
碎片化的图标导致的显示延迟

什么是字体图标

我们使用的字体本质上也是一种图形,而字体图标则是将一些特定的内容映射成对应的图,从而达到将图标变成与文字相同的效果,可以被color、font-size等属性控制

Bootstrap中使用了字体图标。
FontAwesome则是一个独立的字体图标库。
但两者都过于庞大,有许多你可能根本用不到的图标,你可能需要自己自定义一个字体图标。

使用iconfont制作字体图标

  1. 登录账号
  2. 收集图标
  3. 将图标添加到某个项目
  4. 导出成文件
收集图标:

1.使用搜索功能


IconFont_第2张图片
使用搜索功能

2.自己上传图标

IconFont_第3张图片
上传图标页面
IconFont_第4张图片
批量上传并命名
将图标添加至项目
IconFont_第5张图片
将图标增加至购物车
IconFont_第6张图片
添加至项目
IconFont_第7张图片
在我的项目中查看并导出文件

如何使用字体图标?

  1. 引入CSS文件 (iconfont.css)
  2. 引入字体文件 (iconfont.eot[.svg | .ttf | .woff]
  3. 在HTML中使用对应的样式
IconFont_第8张图片
iconfot.css
  1. font-family用于指定字体
  2. .iconfont是应用了该字体的类
  3. icon-XXX 则是对应的图标
在HTML中对应的写法

你也可以修改对应的样式,控制图标大小颜色等

你可能感兴趣的:(IconFont)