CSS字体图标的生成和使用

字体图标随着众多项目的开发，变得不可或缺，它在一定程度上减少了过度使用图片导致的资源占用问题，图片失真问题，通过代码的方式让图标更加轻量化，同时也提高了项目的运行性能哦，下面给大家简单分享下自己学习的过程呐

一、如何生成字体图标
1>首先，下载需要生成字体图标的图片，那么你可以到网站（矢量图，各种图）（阿里巴巴图标库） https://www.iconfont.cn/
寻找你需要的（svg）格式的图片并下载到本地，可自定义图片颜色和大小。
2>打开网站 https://icomoon.io/ 找到那个紫色的按钮点它，如下图

完后点击左上角如图按钮，导入你刚才下载到本地的svg图标，如下所示
然后点击右下角的Generate Font 按钮，如图

就会跳到此页面

点击Download按钮，就会将生产的字体图标文件下载到你的本地了哦。

二、使用方式
文件的目录格式如图，通常我们只需要以下我圈出来的两个文件就可以啦，将这两个目录拷贝到你的项目中

（1）style.css代码如下：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?75p0ri');
  src:  url('fonts/icomoon.eot?75p0ri#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?75p0ri') format('truetype'),
    url('fonts/icomoon.woff?75p0ri') format('woff'),
    url('fonts/icomoon.svg?75p0ri#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

（2）在页面中，我们只要给一个元素添加相应的类名就行，那么我们回到这里来，点击中间的按钮selection

点击selection按钮后跳转到该页面，选择你导入的图标，此时统计图标个数变为5

再次点击Generate Font按钮，回到如下页面，点击Get Code将显示图标对应的对吗片段

复制如图所示的css代码到style.css文件中逐个进行添加

添加成功后的css代码如下图

/*
* @Author: liwen
* @Date:   2018-12-24 11:27:27
* @Last Modified by:   liwen
* @Last Modified time: 2018-12-24 11:29:53
*/
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?75p0ri');
  src:  url('fonts/icomoon.eot?75p0ri#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?75p0ri') format('truetype'),
    url('fonts/icomoon.woff?75p0ri') format('woff'),
    url('fonts/icomoon.svg?75p0ri#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-checkCode:before {
  content: "\e900";
  color: #fff;
}
.icon-hide:before {
  content: "\e901";
  color: #fff;
}
.icon-password:before {
  content: "\e902";
  color: #fff;
}
.icon-show:before {
  content: "\e903";
  color: #fff;
}

.icon-user:before {
  content: "\e904";
  color: #fff;
}

好啦~~，代码可以引入到你的项目中玩儿去啦