热门标签 | 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 项目中需要用到的样式文件。

推荐阅读
  • 您的数据库配置是否安全?DBSAT工具助您一臂之力!
    本文探讨了Oracle提供的免费工具DBSAT,该工具能够有效协助用户检测和优化数据库配置的安全性。通过全面的分析和报告,DBSAT帮助用户识别潜在的安全漏洞,并提供针对性的改进建议,确保数据库系统的稳定性和安全性。 ... [详细]
  • 2020年9月15日,Oracle正式发布了最新的JDK 15版本。本次更新带来了许多新特性,包括隐藏类、EdDSA签名算法、模式匹配、记录类、封闭类和文本块等。 ... [详细]
  • 本文详细介绍了 Java 网站开发的相关资源和步骤,包括常用网站、开发环境和框架选择。 ... [详细]
  • 本文介绍了如何查看PHP网站及其源码的方法,包括环境搭建、本地测试、源码查看和在线查找等步骤。 ... [详细]
  • Spring Data JdbcTemplate 入门指南
    本文将介绍如何使用 Spring JdbcTemplate 进行数据库操作,包括查询和插入数据。我们将通过一个学生表的示例来演示具体步骤。 ... [详细]
  • 2022年2月 微信小程序 app.json 配置详解:启用调试模式
    本文将详细介绍如何在微信小程序的 app.json 文件中启用调试模式(debug),并通过实际案例展示其配置方法和应用场景。 ... [详细]
  • 机器学习算法:SVM(支持向量机)
    SVM算法(SupportVectorMachine,支持向量机)的核心思想有2点:1、如果数据线性可分,那么基于最大间隔的方式来确定超平面,以确保全局最优, ... [详细]
  • 本文节选自《NLTK基础教程——用NLTK和Python库构建机器学习应用》一书的第1章第1.2节,作者Nitin Hardeniya。本文将带领读者快速了解Python的基础知识,为后续的机器学习应用打下坚实的基础。 ... [详细]
  • 本文介绍如何使用OpenCV和线性支持向量机(SVM)模型来开发一个简单的人脸识别系统,特别关注在只有一个用户数据集时的处理方法。 ... [详细]
  • 使用jqTransform插件美化表单
    jqTransform 是由 DFC Engineering 开发的一款 jQuery 插件,专用于美化表单元素,操作简便,能够美化包括输入框、单选按钮、多行文本域、下拉选择框和复选框在内的所有表单元素。 ... [详细]
  • MicrosoftDeploymentToolkit2010部署培训实验手册V1.0目录实验环境说明3实验环境虚拟机使用信息3注意:4实验手册正文说 ... [详细]
  • Ext JS MVC系列一:环境搭建与框架概览
    本文主要介绍了如何在项目中使用Ext JS 4作为前端框架,并详细讲解了Ext JS 4的MVC开发模式。文章将从项目目录结构、相关CSS和JS文件的引用以及MVC框架的整体认识三个方面进行总结。 ... [详细]
  • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • 基于Net Core 3.0与Web API的前后端分离开发:Vue.js在前端的应用
    本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发,并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作,开发环境为Windows 10和Visual Studio 2019,MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装,为开发者提供了一套完整的开发指南。 ... [详细]
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
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社区 版权所有