icomoon字体图标导入与使用

icomoon字体图标导入与使用

进入icomoon官网

---

点击连接进入icomoon官网
进入官网，默认会生成一套图标文件，若是不须要能够将全部的文件进行删除。具体操做以下图所示。

会员用户能够经过帐号存储图标的信息，非会员用户只能经过浏览器的在本地存储相应的图标信息，故普通用户劲量在同一个浏览器上面去编辑图标库，有须要的状况下将全部的svg图标进行导出备份。

---

导入图标

1. 点击import Icons按钮，选择本身的图标进行导入。

2. 图标导入后，选择须要生成字体库的图标，默认全部的图标是不选中的。

3. 经过操做按钮修改图标的描述排序等相关信息。

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

5. 勾选完所须要的图标后点击Generate Font生成字体文件。

6. 在此页仍是能够对图标的最终信息进行编辑。

1. 全部图标的名称不能重复，图标名称用于最终的css类名称。
2. 图标对应的16进制编码也不能重复，编码与图标是一一对应关系。
3. 最后生成的字体文件都会对图标默认加上icon-的前缀。

---

字体库项目编辑

1. 点击项目管理按钮，进入项目管理界面

2. 如图示可对项目进行相应的操做

字体库文件使用

下载后解压到本地，会有如图多个文件，项目中须要使用的文件就fonts文件夹下的字体文件,style.css样式文件便可。

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