何为字体图标？

在说字体图标之前，我们先说一下图片，图片可以让我们的界面更加美丽，但是图片也是有缺点的，比如图片会增加总文件的大小，还会增加额外的HTTP请求，这都会降低网页的性能的。更重要的是图片不能很好的进行缩放，因为放大和缩小可能会使图片失真，所以我们就开始使用字体图标。

字体图标可以做出跟图片一样的事情，但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等，而且本身体积更小，但携带的信息并没有削减，几乎支持所有的浏览器。

icomoon字库

1.下载方式

①浏览器中输入地址http://www.icomoon.io/，点击紫色按钮

②进到图标界面，根据自己的需要选择图标

同时，还可以对图标进行修改，比如说现在找到了这个字体图标

那我想要一个下箭头的应该如何做呢？

点击导航栏中的编辑按钮，然后点击该字体图标

这样就可以生成两个图标了，一个是原来的，一个是这次生成的，如下图所示：

③选择完成之后，接下来就是下载了，先单击右下角的“生成字体”

可以看到自己选择的图片，右下角有下载的按钮

④下载完成解压如下

2.使用方式

我们将fonts文件夹拷贝到我们的项目根目录，在style标签中添加代码，这里注意引入的路径问题哦！

@font-face {/*1. 这个字体名称要注意 icomoon*/font-family: "icomoon";/*2. 一定要注意路径的问题*/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 {font-family: "icomoon";font-size: 50px;color: red;
}

body标签中添加

<span></span>

注意span标签中间的是图标的名字

3.效果展示

最后效果如下

4.扩充图标

假设在项目开发后期我又新加了一个字体图标，或者是当时下载的时候可能下少了，这个时候我们就要追加字体图标了，那应该如何做呢？

还记得解压完之后的文件夹吗？里面有一个selection.json，这里我们需要用到这个文件

导入文件然后选择Yes

这样之前选择的就加载出来了，剩下来的步骤就和之前一样了

需要注意的是：将新下载下来的fonts替换之前的fonts文件夹

总结

由此，使用icomoon引入字体图标就成功了，快快行动起来让我们的界面更加好看吧！

使用icomoon引入字体图标及扩充字体图标的方法相关推荐

控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析
元素的显示与隐藏: 常见控制元素的显示和隐藏的属性有display.visibility.overflow,需要清楚的理解三者之间的区别. display显示: 当值为none时为销毁对象,不保留原位 ...
iconfont字体图标以及css字体图标在线制作和使用（推荐）
字体图标的制作和使用呢,也不一定非要自己去 https://icomoon.io/ 网站制作,那样子貌似有点麻烦,那么这里给大家一种更简便的操作方式,方便快捷的制作并使用字体图标,同样的,我们还是离不 ...
【icon图标】icon字体图标的下载与使用
下载链接: icomoon图标库:Icon Font & SVG Icon Sets ❍ IcoMoon(国外) 阿里巴巴图标库:iconfont-阿里巴巴矢量图标库(国内阿里巴巴图标库) ...
css技术点二：字体图标（阿里巴巴字体图标使用）
css技术点二:字体图标(阿里巴巴字体图标使用) 一.什么是字体图标二.字体图标的好处三.字体图标用法四.字体图标格式介绍一.什么是字体图标字体图标可以为前端工程师提供一种方便高效的图标使用 ...
三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
font-face字体图标和inconfont矢量图标库
font-face字体图标 font-face是css3中的一个模块,他主要是把自己定义的web字体嵌入到你的网页中. 好处: 1.可以非常方便的改变大小和颜色 2.放大后不会失真 3.减少请求次数和 ...
Web前端开发 icon图标转 web字体图标
在我们大多数的项目当中,icon图标是必不可少的,有的一个一个单独切片,或者将它们拼接组合起来(图片合成技术: css sprite )从而减少请求,方便调用等,但是随着项目的逐渐扩展壮大,图标越来越 ...
阿里巴巴图标库的字体图标使用方法
文章目录前言:此方法适合成体系的应用图标,若使用单个图标可直接下载使用一.将图片加入项目并下载至本地二.引用图标的三种方式 1. font-class引用 2. Symbol 引用 3. Uni ...
微信小程序使用base64字体图标（生成字体图标+将字体图标转为base64格式）
问题: 1.微信小程序不能随意使用网络资源,如字体,css文件等 2.不能在小程序中使用字体文件 3.不能使用background-position背景图片定位来使用内部png图片下面就介绍一下如何 ...

使用icomoon引入字体图标及扩充字体图标的方法