icomoon使用详细介绍

此篇博文讲述如何利用icomoon导入图标，从而把自己想要的都通过icomoon方式进行，大家都知道，网站以及移动端，用图标还是尽量选择这种。因为直接用image有些图标会失真，从而也是前端开发之中，需求去掌握的一项，很简单的就几个步骤。

一，icomoon官网链接：https://icomoon.io/app/#/select
进入官网，默认会生成一套图标文件，如果不需要可以将所有的文件进行删除。具体操作如下图所示。


为橙色的是已选择的图标；
灰色的状态是未选择的；
右边紫色的开关按钮，可以开或关掉此列表；
左上角可以创建列表，自定义的相关文件，或者导入文件；
impout icons按钮为导入自己想要的SVG格式图。
会员用户可以通过账号存储图标的信息；
非会员用户只能通过浏览器的在本地存储相应的图标信息，因此普通用户尽量在同一个浏览器上面去编辑图标库，有需要的情况下将所有的svg图标进行导出备份，这样每次就不会失去以前导入好的图标了。

二：导入图标文件

选择自己做好的SVG格式的图标，会自动导入到下方列表中，如果没有SVG格式的图标，可以进入阿里图库下载：http://www.iconfont.cn/


三：选中修改按钮，点击任意图标，弹出信息修改框。

四：导入创建新列表，以及退出，如下：


五：如果自己没有制作好的图标，也可以用官网提供的图标，也是很不错的，有些需要缴纳费用，有些是免费的，其实也有挺多的。


六：图标放置好了后，就点击这个进行下载fons文件，会看到如下界面：


图标的名称可以自定义，自己取。
下面，如：e901，可以点击查看在HTML中的调用以及方法。
点击右下角的Download进行下载库文件；
七：此时，下载文件完毕之后，会看到Zip的Icomoon文化，进行压缩；


这是解压后的相关文件，我们就需要css文件以后fonts文件，demo文件可以进行参考下，里面是调用相关图的方法。

把这整个icomoon文件导入到项目文件中

八：此时，就可以进行在Html中调用图标了。


如:我用这个span标签， 把这个span文件写入html上

千万别忘记，把CSS样式文件，导入到Html中（就是导入进来的fonts里面的style.css文件），如：<link href="fonts/two/style.css" rel="stylesheet">

想用什么图，就直接在标签里调用名称就可以了。

十：

1. demo-files,demo.html demo示例文件。
2. fonts 字体文件。
3. Read Me.txt 说明文件。
4. selection.json iconmoon项目文件，可用于导入。
5. style.css 项目中需要用到的样式文件。

最终显示如下所示：


以上就是讲述如何利用icomoon进行方法调用图标，现在这种方式，做前端开发人员务必要掌握此项技能，也对项目开发有很好的兼容与帮助，希望对各位看官有所帮助。