icomoon的用途以及怎么用

icomoon  打个比方, 就是你需要买水果, 点了一份外卖, icomoon就把你要的水果全部打包给您送过来, 然后,你需要的时候, 自己拿过来, 然后取出相应的水果就行了.

icomoon 可以将.svg结尾的文件生成字体图标, 字体图标放大缩小的时候不会失真

下面就来讲讲如何使用icomoon

进入IconMoon编辑页面

首先进入IcoMoon的首页  https://icomoon.io/

点击右上角的


点击之后进入页面

icomoon的用途以及怎么用_第1张图片


1.如果想要添加自己的图标

点击左上角的那个三横的那个按钮

icomoon的用途以及怎么用_第2张图片

再选择新建一个空的集合(New Empty Set)


新建完之后就会出现一个空的集合


再点击左上角的 Import Icons 


,就可以导入自己想要的svg文件了


2.导入系统自定义的一些图标

点击左上角的


之后就进入页面

icomoon的用途以及怎么用_第3张图片

里面有一些是收费的, 也有很多是免费的, 点击相应图标下方的


 就可以了



选择图标.并且下载


点击图标即可以选择了, 加了边框的即为选择了的图标

icomoon的用途以及怎么用_第4张图片
下方也有您选择的图标的个数显示  



选好图标之后,点击最下方的创建字体就可以了



点击创建字体之后出现了新页面,即字体编辑页面

icomoon的用途以及怎么用_第5张图片


这个为字体的名字


这个为字体的编号



点击下方的Download


即可以进行下载




字体应用到html中


下载好字体后解压

icomoon的用途以及怎么用_第6张图片


将 fonts文件夹, 以及style.css放入工程中 


并将style.css导入到index.html中



style.css中的内容


根据css文件下面生成的class类的名称添加到html对应的节点上即可添加字体。

当然添加字体还需要设置font-size,也可以根据实际情况设置color改变其颜色。



类名,如 ico-qq是给html中用的, 

content后面的编码就是 自己设置的时候弄的编码

icomoon的用途以及怎么用_第7张图片

icomoon的用途以及怎么用_第8张图片




最后就可以应用自己的字体啦. 很简单, 只要给自己的div 等标签加一个相应的类就行了

icomoon的用途以及怎么用_第9张图片




最后的结果

icomoon的用途以及怎么用_第10张图片







你可能感兴趣的:(html)