icomoon使用详细介绍

2020-03-14 23:15:25

参考地址 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进行方法调用图标,现在这种方式,做前端开发人员务必要掌握此项技能,也对项目开发有很好的兼容与帮助,希望对各位看官有所帮助。

  • 2018-03-14 17:41:44

    MySQL的if,case语句使用总结

    Mysql的if既可以作为表达式用,也可在存储过程中作为流程控制语句使用,如下是做为表达式使用:

  • 2018-03-16 23:56:14

    layer-list -- layer-list的基本使用介绍

    简单理解,layer 是层,list 是列表,那么 layer-list 就是层列表的意思。但是,是什么层列表呢?? 其实 layer-list 是用来创建 LayerDrawable 的,LayerDrawable 是 DrawableResource 的一种, 所以,layer-list 创建出来的是 图层列表,也就是一个drawable 图形。

  • 2018-03-20 22:01:18

    Java如何进行Base64的编码(Encode)与解码(Decode)?

    Base64是一种能将任意Binary资料用64种字元组合成字串的方法,而这个Binary资料和字串资料彼此之间是可以互相转换的,十分方便。在实际应用上,Base64除了能将Binary资料可视化之外,也常用来表示字串加密过后的内容。如果要使用Java 程式语言来实作Base64的编码与解码功能,可以参考本篇文章的作法。

  • 2018-03-20 23:38:05

    PHP中json_encode与json_decode

    json_encode() 对变量进行JSON编码,json_decode() 对JSON数据进行解码,转换为PHP变量

  • 2018-03-21 22:26:03

    Android BASE64Encoder不能用的问题

    昨天项目与后台交互的接口传参数需要加密,用的是BASE64Encoder加密,可是这个类不能用,谷歌了一下说的是:

  • 2018-03-21 22:28:02

    Java加密算法 AES

    AES 算法 对称加密,密码学中的高级加密标准 2005年成为有效标准