热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

icomoon字体图标导入与使用

icomoon字体图标导入与使用进入icomoon官网点击链接进入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 项目中需要用到的样式文件。

推荐阅读
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
  • SVG画布HTML5提供两种强有力的“画布”:SVG和Canvas。SVG的特点:SVG绘制的是矢量图,因此对图像进行放大不会失真基于XM ... [详细]
  • SVG 动态滤镜实现水面波动效果
    探讨如何使用SVG滤镜技术创建动态的水面波动效果,包括HTML、CSS和JavaScript代码示例。 ... [详细]
  • 作为一名CSS初学者,我在博客园中尝试通过CSS美化页面,特别是为超链接添加图标,以提升阅读体验。本文将分享如何使用CSS和字体图标库来实现这一功能。 ... [详细]
  • 本文由公众号【数智物语】(ID: decision_engine)发布,关注获取更多干货。文章探讨了从数据收集到清洗、建模及可视化的全过程,介绍了41款实用工具,旨在帮助数据科学家和分析师提升工作效率。 ... [详细]
  • Leetcode学习成长记:天池leetcode基础训练营Task01数组
    前言这是本人第一次参加由Datawhale举办的组队学习活动,这个活动每月一次,之前也一直关注,但未亲身参与过,这次看到活动 ... [详细]
  • 在 CentOS 7 系统中安装 Scrapy 时遇到了一些挑战。尽管 Scrapy 在 Ubuntu 上安装简便,但在 CentOS 7 上需要额外的配置和步骤。本文总结了常见问题及其解决方案,帮助用户顺利安装并使用 Scrapy 进行网络爬虫开发。 ... [详细]
  • 本文将介绍如何使用 Go 语言编写和运行一个简单的“Hello, World!”程序。内容涵盖开发环境配置、代码结构解析及执行步骤。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 本文深入探讨 MyBatis 中动态 SQL 的使用方法,包括 if/where、trim 自定义字符串截取规则、choose 分支选择、封装查询和修改条件的 where/set 标签、批量处理的 foreach 标签以及内置参数和 bind 的用法。 ... [详细]
  • 经过一段时间的学习与实践,我已经使用D3.js完成了一些项目。鉴于中文D3教程稀缺,而英文资料虽丰富却对英语水平有一定要求,特此撰写一系列D3实战文章,旨在通过具体案例(如统计数据可视化、地图信息展示等)分享D3的使用技巧,促进技术交流。 ... [详细]
author-avatar
泡泡
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有