字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。在移动端响应式中，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，这就是字体图标

字体图标优点：

1、可以做出跟图片一样可以做的事情,改变透明度、旋转度等…
2、但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
3、本身体积更小，但携带的信息并没有削减。
4、几乎支持所有的浏览器
5、移动端设备必备…

字体图标使用流程

1、设计字体图标

在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标，之后保存为svg格式

2、上传生成字体包

将svg格式的图片转换成页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。
推荐网站： http://icomoon.io
具体流程：
a、打开网站后点击icoMoon App
字体图标
b、选择import icons

c.找到.svg文件目录并导入

3.下载兼容字体包

上传完毕，网站会把svg图片转换为字体格式，然后下载下来。如果想要使用常见的图标，直接在网页下载
具体流程：
a、选中需要的图标，点击右下角Generate Font
字体图标
b、点击Download下载压缩包

4、字体引入到HTML

具体流程：
a、压缩包解压，把fonts文件夹放到网页根目录下
字体图标
b、在样式里面声明字体：告诉别人我们自己定义的字体

   @font-face {
     font-family: 'icomoon';//可以自己命名
     src:  url('fonts/icomoon.eot?7kkyc2');
     src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
       url('fonts/icomoon.woff?7kkyc2') format('woff'),
       url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
   }

c、添加span标签，打开网页demo.html网页，复制网页矩形框至span盒子里
字体图标
d、盒子里面添加结构

e、预览网页

5、追加新图标到原来库里面

如果网页制作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做
把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。

字体图标优点：

字体图标使用流程

相关推荐