CSS-字体图标

  图片是有很多优点的，但是缺点也很明显，比如图片不仅增加了总文件的大小，还增加了很多额外的http请求，这都会大大降低网页的性能，更重要的是图片不能很好的进行缩放，因为图片大小和缩放都会失真，很多情况下是希望图标是可以缩放的，此时就会用到字体图标。
字体图标的优点
可以做出跟图片一样可以做的事情，改变透明度、旋转度等
本质是文字，可以很随意的改变颜色、产生阴影、透明效果等
本身体积更小，但携带的信息并没有削减
几乎支持所有的浏览器
移动端设备必备

---

字体图标库：
icommon.io
iconfont.cn
使用步骤，还是很好玩的，可以试一下
1． 下载字体图标
  首先在网站中选择要下载的字体图标，或者是将自己的svg文件直接上传至网站，得到字体图标，并下载

image.png

image.png

image.png

2． 将下载好的文件中fonts文件夹拷贝到自己的项目中，并添加下面的代码在css文件中
（特别注意，下面的代码中有路径的书写，一定要看清楚是不是想要的路径）

@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#icommon') format('svg');
    font-weight: normal;
    font-style: normal;
}

3． 添加文字图标进去，两种方法
方法一：

image.png

复制右侧文本到内容中

image.png

.fonttest {
    font-family: 'icomoon';
    color: blue;
    font-size: 30px;
}

在选择器中添加如图黄色内容，对应名称要和上面黄色图标相同，就可以使用了，还可以通过设置颜色、字体大小改变图标的样式。
方法二：
添加伪类选择器，在伪类选择器中添加内容

span::before {
    content: '\e900'
}

这个内容的格式就是在上图中左侧的标签。

image.png

补充一点：在原库中添加新图标
点击网页中的import icons图标，并选择下载地址为上一次下载的文件中的selection.json文件，然后之前选择过的图标就可以在网页中显示出来了，之后就可以添加新的图标，然后步骤如上，还要再经过下载等过程，将项目中的fonts文件进行更新。