What is IcoMoon ?
昨儿个托我们美女UI的福，接触了IcoMoon这个网站，之前确实没摸瑟过，原谅我孤陋寡闻，昨天小试了一下感觉不错，赶紧分享之。那么IcoMoon究竟是干哈的呢？接下来简单介绍下。
IcoMoon.png
就我个人而言，往往要想找点什么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
至此，Class is over！从此以后，UI再也不用担心你烦她了！
网友评论