资讯专栏INFORMATION COLUMN

icomoon字体图标导入与使用

Amos / 2282人阅读

摘要:字体图标导入与使用进入官网点击链接进入官网进入官网,默认会生成一套图标文件,如果不需要可以将所有的文件进行删除。通过操作按钮修改图标的描述排序等相关信息。图标对应的进制编码也不能重复,编码与图标是一一对应关系。项目文件,可用于导入。

icomoon字体图标导入与使用 进入icomoon官网

点击链接进入icomoon官网
进入官网,默认会生成一套图标文件,如果不需要可以将所有的文件进行删除。具体操作如下图所示。

会员用户可以通过账号存储图标的信息,非会员用户只能通过浏览器的在本地存储相应的图标信息,故普通用户劲量在同一个浏览器上面去编辑图标库,有需要的情况下将所有的svg图标进行导出备份。
导入图标 1. 点击import Icons按钮,选择自己的图标进行导入。

2. 图标导入后,选择需要生成字体库的图标,默认所有的图标是不选中的。 3. 通过操作按钮修改图标的描述排序等相关信息。

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

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

6. 在此页还是可以对图标的最终信息进行编辑。

所有图标的名称不能重复,图标名称用于最终的css类名称。

图标对应的16进制编码也不能重复,编码与图标是一一对应关系。

最后生成的字体文件都会对图标默认加上icon-的前缀。

字体库项目编辑 1. 点击项目管理按钮,进入项目管理界面

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

字体库文件使用

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

demo-files,demo.html demo示例文件。

fonts 字体文件。

Read Me.txt 说明文件。

selection.json iconmoon项目文件,可用于导入。

style.css 项目中需要用到的样式文件。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103753.html

相关文章

  • 自己制作微信小程序使用base64字体图标

    摘要:问题微信小程序不能随意使用网络资源,如字体文件等不能在小程序中使用字体文件不能使用背景图片定位来使用内部图片下面就介绍一下如何制作字体图标。简易方式通过两个在线工具,很容易地生成加密的字体图标。 问题: 1.微信小程序不能随意使用网络资源,如字体,css文件等 2.不能在小程序中使用字体文件 3.不能使用background-position背景图片定位来使用内部png图片 下面就介绍...

    leon 评论0 收藏0
  • 字体图标(font-icon),你还有什么理由不使用它?

    摘要:自己制作字体图标的时候有需要注意这些阿里图标库的图标多,免费但是编辑器不如好用。建议设计师对于一些常用图标直接去阿里图标库找,下载文件即可。 优点 下面的简介来自,著名字体图标库Font Awesome的首页,http://fontawesome.io: Font Awesome gives you scalable vector icons that can instantly b...

    felix0913 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<