作者:泡泡 | 来源:互联网 | 2023-07-15 21:23
icomoon字体图标导入与使用进入icomoon官网点击链接进入icomoon官网进入官网,默认会生成一套图标文件,如果不需要可以将所有的文件进行删除。具体操作如下图所示。会员用
icomoon字体图标导入与使用
进入icomoon官网
点击链接进入icomoon官网
进入官网,默认会生成一套图标文件,如果不需要可以将所有的文件进行删除。具体操作如下图所示。
![《icomoon字体图标导入与使用》](https://img.php1.cn/3cd4a/1eebe/cd5/02c379d60086f382.webp)
会员用户可以通过账号存储图标的信息,非会员用户只能通过浏览器的在本地存储相应的图标信息,故普通用户劲量在同一个浏览器上面去编辑图标库,有需要的情况下将所有的svg图标进行导出备份。
导入图标
1. 点击import Icons
按钮,选择自己的图标进行导入。
![《icomoon字体图标导入与使用》](https://img.php1.cn/3cd4a/1e618/c5a/d5d40da532c3a782.png)
2. 图标导入后,选择需要生成字体库的图标,默认所有的图标是不选中的。
3. 通过操作按钮修改图标的描述排序等相关信息。
![《icomoon字体图标导入与使用》](https://img.php1.cn/3cd4a/1eebe/cd5/60405fda58cd0acd.webp)
4. 选中修改按钮,点击任意图标,弹出信息修改框。
![《icomoon字体图标导入与使用》](https://img.php1.cn/3cd4a/1eebe/cd5/b428d8f746fb8d47.webp)
5. 勾选完所需要的图标后点击Generate Font
生成字体文件。
![《icomoon字体图标导入与使用》](https://img.php1.cn/3cd4a/1eebe/cd5/b386c433a16f5497.webp)
6. 在此页还是可以对图标的最终信息进行编辑。
![《icomoon字体图标导入与使用》](https://img.php1.cn/3cd4a/1eebe/cd5/443b30bb45e66690.webp)
- 所有图标的名称不能重复,图标名称用于最终的css类名称。
- 图标对应的16进制编码也不能重复,编码与图标是一一对应关系。
- 最后生成的字体文件都会对图标默认加上
icon-
的前缀。
字体库项目编辑
1. 点击项目管理按钮,进入项目管理界面
![《icomoon字体图标导入与使用》](https://img.php1.cn/3cd4a/1eebe/cd5/21e585a7e21fc7dc.png)
2. 如图示可对项目进行相应的操作
![《icomoon字体图标导入与使用》](https://img.php1.cn/3cd4a/1eebe/cd5/e88efe5b0a13a7fa.webp)
字体库文件使用
下载后解压到本地,会有如图多个文件,项目中需要使用的文件就fonts
文件夹下的字体文件,style.css
样式文件即可。
![《icomoon字体图标导入与使用》](https://img.php1.cn/3cd4a/1eebe/cd5/433ea70d6ea577b1.jpeg)
-
demo-files
,demo.html
demo示例文件。 -
fonts
字体文件。 -
Read Me.txt
说明文件。 -
selection.json
iconmoon项目文件,可用于导入。 -
style.css
项目中需要用到的样式文件。