1.icomoon地址

Icon Font & SVG Icon Sets ❍ IcoMoonIcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect icons or import your own vectors.https://icomoon.io/

2.获取字体图标

进入首页

点击右上角按钮 IcoMoon App

进入图标挑选界面，选择合适的目标

上方左边有编辑按钮，点击后可对目标进行编辑操作。

点击右下角按钮 Generate Font 生成字体

点击下方 Download 下载字体，会得到一个压缩包

3.使用字体图标

解压压缩包，把 fonts 文件放到页面根目录下。

打开 style.css 文件

复制这一段到html文件的<style></style>中

点开domo.html文件

复制目标小方块

粘贴到代码合适位置，给目标块的 font-family 设置属性值为

font-family: 'icomoon';

之后就可以给字体图标设置大小和颜色了

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?u6h0le');src: url('fonts/icomoon.eot?u6h0le#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?u6h0le') format('truetype'),url('fonts/icomoon.woff?u6h0le') format('woff'),url('fonts/icomoon.svg?u6h0le#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}div {font-family: 'icomoon';font-size: 50px;color: blueviolet;}</style>
</head><body><div></div>
</body></html>

4、字体图标追加

再次点击IcoMoon App

点击左上角的 import icons 按钮

选择selection.json文件

然后再一次生成，下载，用新的压缩包替换旧的

icomoon字体图标库的使用相关推荐

字体图标库-icomoon的使用方法
1.进入官网 icomoon官网地址:https://icomoon.io/ 2.进入官网后, ① 点击IcoMoon App ② 选择自己要的图标. ③ 会显示在Selection()里面. ④ 点 ...
【web组件库系列】封装自己的字体图标库
封装自己的web字体图标库 CSDN:jcLee95 邮箱 :291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/article/deta ...
精灵图与字体图标的区别和用法（附Icomoon字体图标的使用方法）
CSS苦逼学习日记(6) 精灵图 1.精灵图是什么?: 把许多小图标都放在一个大图片上,这样利用小图标的时候只需要重复使用多次利用同一张大图片,减少加载各种图片路径的时间,减小程序(网页)的运行速率, ...
超全超靠谱的 iconfont 字体图标库维护与使用
字体图标库的使用这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅- 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里矢量 ...
三分钟教会你自制 iconFont 字体图标库
app开发的时候,我们大多会用到字体icon,下面我们就讲解一下,如何自定义生成 iconFont 一般情况,我们优先选择在 Iconfont-阿里巴巴矢量图标库下载我们需要的矢量icon的svg格 ...
icomoon字体图标使用步骤
字体图标一般字体安装在c盘->windows->fonts 一.优点: 1.随意更改字体颜色,大小,缩放等 2.体积小 3.不增加请求 4.和图片效果一样 5.几乎支持所有浏览器,兼容性 ...
css3 - 字体图标库使用方法
一些字体图标库的网站 https://icomoon.io/app/#/select http://www.iconfont.cn/ http://www.bootcss.com/ http://ww ...
如何使用IcoMoon字体图标
如何使用IcoMoon字体图标一,字体图标工具: 1.登录字体图标网站:https://icomoon.io/app/#/select 2.Svg在线编辑工具:https://c.runoob.co ...
云炬Android开发笔记 3-2字体图标库集成与封装
1.项目:android-iconify点此链接到Github 这是一个字体图标库,用字体来代替很多图片. Android开发经常将很多本地图标放在drawable和mipmap文件夹下,这样有一些坏 ...

icomoon字体图标库的使用