icomoon图标的使用

最新推荐文章于 2023-12-27 17:32:49 发布
最新推荐文章于 2023-12-27 17:32:49 发布
阅读量2.1w 收藏 29
点赞数 9
分类专栏： html css js icon
css 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
js
1 篇文章 0 订阅
订阅专栏
icon
1 篇文章 0 订阅
订阅专栏

早上听同事介绍icomoon的图标，自己上网查找用例，发现确实挺好用，只需在网址： https://icomoon.io/app/    上选择相应图标点击font设置，然后点击下载。将下载文件解压，然后将font文件夹和style.css拷贝到项目中，引用css即可，作为以后参考

转载了相关介绍：转载自：https://i-blog.csdnimg.cn/blog_migrate/c139fb62f280b0592d6cb2fec9bb0cd3.png

最近项目大量用到字体图标，大家也知道，字体图标任意缩放不会失真，也大大减少请求数量，非常好用。以下将讲解本人如何根据美工提供的.svg文件生成字体图标并应用。

借助一个在线生成工具：https://icomoon.io/app/#/select

1、进入网址：主页面


2、新建一个图集


3、添加.svg图片（可以使用现成的，也可以使用自定义的）

使用现成的点击页面红色的Add Icons...

使用自定义的直接拖拽进图集即可添加



4、生成字体文件

（1）选择好要生成的图标（自由选择）

（2）点击底部的："Generate Font F"


可以自由命名


5、修改完成后，点击生成Font


下载到压缩文件：




运用：将fonts文件夹全部内容和style.css文件放到相应的项目中。


根据css文件下面生成的class类的名称添加到html对应的节点上即可添加字体。

当然添加字体还需要设置font-size，也可以根据实际情况设置color改变其颜色。




转载自:http://blog.csdn.net/goodgirl1991/article/details/50416974

icomoon图标是一个超赞超实用的开源图标系列，其图标官网地址为https://icomoon.io/icons.html

好，接下来介绍如何将该系列图标应用在web页面。

下载选定icomoon图标


点击IcoMoon App，进入页面后，选择想要引入web页面的图标，并且点击edit按钮后分别点击选择的图标进行编辑
编辑结束后，点击generate font按钮
点击download下载字体样式文件并从getCOde处可以获得图标的html转义码

web代码的编写

首先当然是需要将自定义字体样式引入web页面
[css] view plain copy
  1. @font-face{  
  2.         font-family:'icomoon';  
  3.         src:url('icomoon.eot');  
  4.         src:url('font/icomoon.eot?#iefix') format('embedded-opentype'),  
  5.             url('font/icomoon.woff') format('woff'),  
  6.             url('font/icomoon.ttf')  format('truetype'),    
  7.             url('font/icomoon.svg#SofiaProLight')  format('svg');  
  8.             font-weight:normal;  
  9.             font-style:normal;  
  10.      
  11.         }  
然后编写html代码，并描述指定标签的css样式，向该标签中添加icomoon图标。
[html] view plain copy
  1. <body>  
  2.     <div data-icon="&#xe901;"></div><!--在之前获得的图标html转义码，用来指定在该标签处添加哪一图标-->  
  3.     <div data-icon="&#xe900;"></div>  
  4. </body>  


[css] view plain copy
  1. div:after{<!--:before或者:after必写，不然无法显示出图标-->  
  2.     font-family:'icomoon';  
  3.      content: attr(data-icon);<!--此处指定向标签中添加哪一图标-->  
  4.   
  5.     }  
通过以上步骤，图标得以显示

慕容羽
关注
  • 9
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
图标的使用
赵平安
01-22 62
import java.awt.*; import java.net.URL; import javax.swing.*; public class Demo extends JFrame{ public Demo() { setBounds(100, 100, 500, 350); setDefaultCloseOperation(EXIT_ON_CLOSE); Container c = getContentPane(); JLabel l = new JLabel("这是一个
使用图标
qq_35993607的博客
07-24 157
一.Iconfont 1.下载至本地 2.将文件引入 项目 3.在main.js注册 import '@/assets/font/iconfont.css' 4.使用：一定要注意iconfont后面的空格！！！ <i :class="'iconfont '+item.iconClass"></i> 二.使用svg： 详见：https://j...
svg2ttf:SVG-> TTF字体转换器
05-01
svg2ttf 将SVG字体转换为TTF格式。 它最初是为编写的，但是您会发现它对您的项目很有用。 对于开发人员： 内部API与FontForge的API类似。 由于主要目标是生成图标字体，因此源可能缺少某些特定的TTF / OTF功能，例如字距调整等。 无论如何，当前代码是开发的良好基础，因为它将节省大量时间来实现正确的编写和优化TTF表。 从CLI使用 安装： npm install -g svg2ttf 用法示例： svg2ttf fontello.svg fontello.ttf 原料药 svg2ttf（svgFontString，选项）-> buf svgFontString -SVG字体内容 options copyright -版权字符串（可选） description说明字符串（可选） ts覆盖创建时间的Unix时间戳（以秒为单位）（可选） url制造
将svg编译成字体图标
u013992330的博客
05-27 3654
有时将svg图标编译成字体图标，可以更方便的来使用，下面就介绍如何将svg编译成字体图标 1. 使用npm安装svgtofont npm i svgtofont 2. 编译字体图标 const svgtofont = require("svgtofont"); svgtofont({ src: path.resolve(process.cwd(), "icon"), // svg 图标目录路径 dist: path.resolve(process.cwd(), "fonts"), /
icomoon使用详细介绍
热门推荐
Aftery的博客
06-18 2万+
此篇博文讲述如何利用icomoon导入图标，从而把自己想要的都通过icomoon方式进行，大家都知道，网站以及移动端，用图标还是尽量选择这种。因为直接用image有些图标会失真，从而也是前端开发之中，需求去掌握的一项，很简单的就几个步骤。 一，icomoon官网链接：https://icomoon.io/app/#/select 进入官网，默认会生成一套图标文件，如果不需要可以将所有的文件进行删除...
SVG转字体图标
11-26 457
SVG转字体图标 一. 问题？ SVG和字体图标的区别是什么？为什么要转换使用？ SVG如何转换字体图标？ 转换过程中遇到的问题有哪些？ 二. 解答 SVG和字体图标的区别以及转换字体图标的好处 SVG和字体图标都是矢量化图形 SVG（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是...
icomoon字体图标使用详解
FL_csdn1的博客
02-23 2686
前言 字体图标在web前端经常用到，它展示的是图标，但本质是字体，所以为它设置属性时可以根据字体的属性设置。它的存在是为了补充精灵图的不足之处，实际开发中简单的样式图标可以使用字体图标，较为复杂的图标还是首选精灵图。这篇文章主要是针对icomoon字体图标的使用方式进行比较全面的讲解。 文章目录前言为什么要使用字体图标总结一下使用字体图标的优势获取字体图标的网站 为什么要使用字体图标 因为图片不能很好地进行缩放，当图片进行放大时会变的模糊。而且加载每一张图片都需要一次“http请求”，因此也拖慢了整个加
icomoon字体图标库
02-19
而icomoon字体图标库正是这样一款强大的工具，专为优化网页性能而设计，帮助开发者轻松地管理和使用图标资源。 **一、icomoon的基本概念** icomoon是一个在线的图标管理平台，允许用户自定义、打包和下载矢量字体...
flutter_icomoon_icons：490个免费的IcoMoon图标
02-05
看一下文档（类IcoMoonIcons）490个免费的IcoMoon图标。 此flutter包可让您使用所有IcoMoon包在找到它安装在pubspec.yaml的dependencies：部分中，添加以下行： flutter_icomoon_icons: <latest> 用法import '...
axure icomoon free 图标库
12-22
axure icomoon free 图标库，包含470个字体图标 ，补充字体库
应用实例icomoon生成字体图标
02-17
总之，icomoon提供了一种高效且灵活的方式来管理和使用图标，无论是为了快速原型设计，还是为了构建复杂的Web应用，都能大大提升工作效率。通过简单的步骤，你就可以拥有一个定制的字体图标库，并在fontTest项目中...
使用icomoon引入字体图标及扩充字体图标的方法
01-08
更重要的是图片不能很好的进行缩放，因为放大和缩小可能会使图片失真，所以我们就开始使用字体图标。 字体图标可以做出跟图片一样的事情，但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等，而且...
将设计稿里的svg文件，转化成字体图标并应用于页面
weixin_48674314的博客
08-11 1518
说明：当我们从UI设计师那里拿到设计稿，会发现有些地方用字体图标是最好处理的，如果用png或者jpg格式的图片的话，处理起来就特别麻烦。这时就需要将这些图片制作成字体图标。 步骤一：我们现在要把这个账户头像的图片取出来，制作成字体图标。 步骤二：选中图片并把它导出，生成svg格式的源文件。如果无法生成这时就要找UI沟通是否能转成svg的文件。 步骤三：下载成功后会得到svg文件。 步骤四：打开阿里的图标库(https://www.iconfont.cn/search)，这里以阿里的...
svg转css font
weixin_44217954的博客
04-16 625
原理是：我们css可以识别系统内的各种字体的，通过font-family来引入，所以我们也可以自定义一套字体用 @font-face，所以就有一种设想，我们把一整套icon当成字体库，每个字都有对应编码，也就是说每个图标都有对应的编码。选中多少个下面的selection就有多少个，比如上面那张图的15个，点击右边的cenerate Font就可以跳到下面这个界面。通过svg，转化为font字体，通过font-size去改变大小，color去改变颜色，然后通过class来引入图标。
字体图标库icomoon和iconfont使用方法
weixin_72322475的博客
09-29 1783
字体图标库icomoon和iconfont使用方法
svg图片转iconfont字体图标
qq_41714508的博客
12-27 733
svg图片转iconfont字体图标
icomoon字体图标的使用
wangyining070205的博客
02-06 1549
今天遇到用icomoon字体图标写的案例，于是详细学习了一下，现整理如下。
如何使用字体图标——icomoon使用详细介绍
weixin_42723136的博客
03-17 4589
此篇博文讲述如何利用icomoon导入图标，从而把自己想要图标通过icomoon方式进行生成。大家都知道，网站以及移动端，用图标还是尽量选择这种。1、直接用image有些图标会失真；2、图标统一管理，方便引用；3、前端开发之中，需求去掌握的一项。 下面来介绍一下如何使用icomoon生成字体图标。 网址：https://icomoon.io/app/#/select 一、首先将UI蓝湖上的svg格式图片切下，并命名规范。 二、登录icomoon，创建集合，并在该集合下导入图标。 三、点击生成字体图标，并
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
前端图标字体的提取和使用
06-13
2. 使用在线工具或者本地工具将字体文件转换为 CSS 代码，例如 Fontello、Icomoon、Fontastic 等。 3. 将生成的 CSS 代码复制到项目中的 CSS 文件中，并在 HTML 文件中引入该 CSS 文件。 4. 在 HTML 文件中使用对应...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值