Icomoon 的使用

IcoMoon是一个可以通过个性化设置来创建自定义图标(字体)的免费生成器。
上面有600+的免费海量图标集,还可以按照自己的需求来定制,而且兼容IE6+以及各种手机设备。前端工程师们可以自己来生成图标,快速简单方便。

1、打开主页面(https://icomoon.io/app/#/select)

2、新建一个图集

3、添加图片
a、可以把自己的.svg拖进来

b、也可以点击Add Icons From Library 来选择网站现有的图标

4、生成字体

点击选中的图标之后,背景会变成白色。


如果想要编辑选中的图标,就可以点击上方的Edit,然后再点击选中的图标,就可以进行编辑啦。

可以对图标进行旋转操作和上下左右移动的操作

编辑完成之后点击Generate Font F 生成字体

这里可以自己命名图标的名字

然后就可以点击Download来下载文件啦。

下载到本地之后解压文件,就会得到以下的文件:

5、在网页上使用。

将fonts文件夹里面的全部文件和style.css里面的内容放到相应的项目中。


根据css生成的类名,应用在html文件里就可以添加字体啦。
可以通过font-size来设置图标的大小,通过color来设置图标的颜色。

.icon-checkmark{
font-size: 30px;
color:pink;
}

当当当当~ 完成啦。总体来说还是很方便的,大小颜色任意设置。大家快用起来吧~

支持原创