使用IcoMoon生成图标字体

就我我的而言，每每要想找点什么ICON素材啊，每每都是酱婶滴，先去FontAwesome(在线图标字体库，但资源有限)里面巴拉巴拉，或者其余资源看看有没有合适的。若是没有就去求助咱们大UI，笑笑给我来整个“加号”啊，笑笑有“减号”吗？来一个来一个，笑笑再给我来个“垃圾箱”呗...嗯，没错，我通常都是这么折磨咱们UI的。我的仍是比较喜欢FontAwesome，其提供的资源很丰富，风格很统一，并且直接在页面内引用须要的样式便可，不须要本身再去调整素材的样式。而咱们今天要白话的IcoMoon，大体做用就是生成相似FontAwesome的图标字体。

IcoMoon是一个在线的图标字体生成器。其容许咱们经过个性化设置生成ICON字体，咱们能够上传本地ICON资源也可使用IcoMoon给咱们提供的丰富素材，最终生成的ICON字体有多种格式供咱们选择（EOT,SVG,WOFF,TTF）。总而言之，有了这个免费资源，咱们就能够个性化的生成ICON字体，而后应用到咱们的WEB页面中了。

生成自定义图标字体

当咱们想要本身的图标图标字体时，操做步骤就如同把大象关进冰箱里，概括起来可分为三步：

• 准备自定义ICON素材 ;
• 生成字体文件;
• 在CSS中引用字体文件;

A. 准备自定义ICON素材

此处须要注意的是，icomoon要求素材格式必须为SVG格式，因此其余格式的素材需提早转换，在此不作赘述。

B. 生成图标字体

到 https://icomoon.io/app/#/select 网站生成图标，具体过程以下：

1 单击 import icons 按钮 导入咱们准备好的svg 图标，或者Add Icons From Library引用这个网站上的一些现成图标。

 

导入素材.png

2 素材添加完成后，点击右下角Font F按钮进入属性设置页面。

 

字体设置.png

 

3 点击Preferences按钮，进行字体属性设置。

 

设置按钮.png

这里咱们能够设置字体的名称，字体样式名称，以及对浏览器的兼容性

 

字体属性.png

4 下载字体文件及demo，点击页面右下方的Download按钮打包下载全部资源。

 

下载字体及demo.png

5 解压下载后的压缩包，能够获得如下的文件夹 其中包括demo，style.css 及fonts文件中的字体文件就是咱们要的。使用时，一块儿拷贝到咱们的项目中便可。

 

压缩包.png

C 在项目中引用

1 将所要用的css 及字体文件放到一个文件夹中。

 

引入图标字体.png

2 在index.html 中引入咱们的css。

 

引入样式.png

3 在须要的页面引用，直接加到相应标签的class属性中，做为样式引用便可。

 

标签内引用.png

做者：桂圆_noble连接：https://www.jianshu.com/p/86fca912fd1d來源：简书著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。