icomoon字体图标导入与运用

icomoon字体图标导入与运用

进入icomoon官网

点击链接进入icomoon官网
进入官网,默许会天生一套图标文件,假如不须要能够将一切的文件举行删除。具体操纵如下图所示。

《icomoon字体图标导入与运用》

会员用户能够经由过程账号存储图标的信息,非会员用户只能经由过程浏览器的在当地存储响应的图标信息,故普通用户劲量在同一个浏览器上面去编辑图标库,有须要的情况下将一切的svg图标举行导出备份。

导入图标

1. 点击import Icons按钮,挑选本身的图标举行导入。

《icomoon字体图标导入与运用》

2. 图标导入后,挑选须要天生字体库的图标,默许一切的图标是不选中的。

3. 经由过程操纵按钮修正图标的形貌排序等相干信息。

《icomoon字体图标导入与运用》

4. 选中修正按钮,点击恣意图标,弹出信息修正框。

《icomoon字体图标导入与运用》

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

《icomoon字体图标导入与运用》

6. 在此页照样能够对图标的终究信息举行编辑。

《icomoon字体图标导入与运用》

  1. 一切图标的称号不能反复,图标称号用于终究的css类称号。
  2. 图标对应的16进制编码也不能反复,编码与图标是一一对应关联。
  3. 末了天生的字体文件都会对图标默许加上icon-的前缀。

字体库项目编辑

1. 点击项目治理按钮,进入项目治理界面

《icomoon字体图标导入与运用》

2. 如图示可对项目举行响应的操纵

《icomoon字体图标导入与运用》

字体库文件运用

下载后解压到当地,会有如图多个文件,项目中须要运用的文件就fonts文件夹下的字体文件,style.css款式文件即可。
《icomoon字体图标导入与运用》

  1. demo-files,demo.html demo示例文件。
  2. fonts 字体文件。
  3. Read Me.txt 申明文件。
  4. selection.json iconmoon项目文件,可用于导入。
  5. style.css 项目中须要用到的款式文件。
    原文作者:陌上
    原文地址: https://segmentfault.com/a/1190000018946291
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞