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进行方法调用图标,现在这种方式,做前端开发人员务必要掌握此项技能,也对项目开发有很好的兼容与帮助,希望对各位看官有所帮助,谢谢您的阅读,下期再见!~

发布了63 篇原创文章 · 获赞 38 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/qq_37523448/article/details/92768958