icomoon使用方法

打开icomoon，选择想要的图标

在Selection中生成这些图标，在Font中下载生成压缩包，并解压。

将fonts文件夹与html文件放在同一个目录下。

复制图标方框位置对图标进行复制。

<!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?7kkyc2');src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?7kkyc2') format('truetype'),url('fonts/icomoon.woff?7kkyc2') format('woff'),url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');font-weight: normal;font-style: normal;
}/*给盒子使用字体*/span,div{font-family: 'icomoon';font-size: 60px;color:red;}</style>
</head>
<body><span></span><div></div>
</body>
</html>

注意要对路径等进行声明，路径要正确。

过程中，可能会设计icomoon字体图标添加的问题，及字体图标的追加，正确操作步骤如下：

①选择要追加的图标，点击页面左上方Import Icons按钮。

②追加完成后，点击Generate Font对图标进行下载并解压。

③用新的icomoon文件替代之前的icomoon文件，并将新的fonts文件移动到与html文件同目录下，完成。

icomoon使用方法相关推荐

icomoon使用详细介绍
此篇博文讲述如何利用icomoon导入图标,从而把自己想要的都通过icomoon方式进行,大家都知道,网站以及移动端,用图标还是尽量选择这种.因为直接用image有些图标会失真,从而也是前端开发之中, ...
在 Oracle Enterprise Linux 和 iSCSI 上构建您自己的 Oracle RAC 11g 集群
作者:Jeffrey Hunter 了解如何以低于 2,700 美元的费用在 Oracle Enterprise Linux 上安装并配置 Oracle RAC 11g 第 2 版开发集群. 本指南中 ...
Java面试题大全2021版
一.Java 基础 JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境. JRE:Java Run ...
使用icomoon引入字体图标及扩充字体图标的方法
何为字体图标? 在说字体图标之前,我们先说一下图片,图片可以让我们的界面更加美丽,但是图片也是有缺点的,比如图片会增加总文件的大小,还会增加额外的HTTP请求,这都会降低网页的性能的.更重要的是图片不 ...
精灵图与字体图标的区别和用法（附Icomoon字体图标的使用方法）
CSS苦逼学习日记(6) 精灵图 1.精灵图是什么?: 把许多小图标都放在一个大图片上,这样利用小图标的时候只需要重复使用多次利用同一张大图片,减少加载各种图片路径的时间,减小程序(网页)的运行速率, ...
Icomoon插入图标方法②
Icomoon插入图标方法② 下载图标方法见方法① 新建代码文件,在css里加入以下代码 /*依然注意路径问题*/ @font-face{font-family:"imooc-icon&qu ...
字体图标库icomoon和iconfont使用方法
目录 1.iconmoon.io使用教程 2.iconfont.cn使用教程 3.如何不通过iconfont项目向已有字体图标中添加新的字体图标 1.iconmoon.io使用教程 icomoon是一 ...
字体图标库-icomoon的使用方法
1.进入官网 icomoon官网地址:https://icomoon.io/ 2.进入官网后, ① 点击IcoMoon App ② 选择自己要的图标. ③ 会显示在Selection()里面. ④ 点 ...
移动端大图缩放模糊_关于移动端小图标模糊问题的解决方法
前言之前给大家讲到图片和文字垂直方向不对齐的问题,其中举的小例子中用到了一个小图标,这个小图标我用的是背景图来显示: .del .icon{ display: inline-block; width ...

icomoon使用方法

icomoon使用方法相关推荐

最新文章

热门文章