失眠网 > 字体图标库-icomoon的使用(详细)

字体图标库-icomoon的使用(详细)

时间：2023-05-29 05:29:37

记录一下自己学习icomoon字体图标库的过程.

文章内容包括四部分：

如何将自己的svg图片生成为字体图标。如何在icomoon下载字体图标并且引入到自己的html中。如何追加字体图标。如何将icomoon上面的字体图标修改成我们想要的样子。

首先附上icomoon官网地址：icomoon官网地址

一、如何将自己的svg图片生成为字体图标

1.进入官网后，点击IcoMoon App

2.点击import Icons,出现弹窗，将自己，要上传的svg选中，上传，上传之后，选中，我们上传的图标，然后点击generate Font，生成字体图标，之后的下载过程就和第二部分如何在icomoon下载字体图标是一样的了。

①

②

二、如何在icomoon下载字体图标并且引入到自己的html中

1.进入官网后,点击IcoMoon App

①选择自己要的图标.

②会显示在Selection()里面.

③点击Generate Font创建字体图标

3.点击Generate Font后,进入下载页面,点击Download,下载字体图标到本地

4.下载到本地,解压文件夹,找到里面的fonts文件夹放到我们项目的根目录中,可以新建一个测试的html测试一下,这里我们起名叫字体图标.html。（注意这个文件夹不要删除哦！）

5.在样式里面声明我们使用的图标字体,告诉别人我们使用的自定义的字体.这里主要注意两个问题.

① 声明我们使用的icomoon

②注意路径问题!

<style>@font-face {/* 1.注意font-family: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;}</style>

5.比如我们要给html文件中的span使用字体图标

①在body中写span标签

②我们打开之前下载下来的icomoon文件夹中的demo.html,在网页中,选中我们想要的图标的右面的小图标,复制,粘贴到我们的span标签中,

③在样式中可以给span标签设置样式

span{font-family: "icomoon";color:orange;font-size:30px;}

6.在网页中就可以看到我们的字体图标的效果啦!

注意：

①我还想说一下,就是在这里又遇到了传说中的灵异事件,就是将demo.html打开后,将网页中的小方框黏贴到span标签中,给span设置font-family:"icomoon"之后,网页中的图标仍然显示的是小方框,并没有变成我所需要的字体图标的形状,然后我百度了好久,想看一下到底是哪里的问题,最后也没百度出来,就在我快要放弃的时候,我把fonts文件夹删除了,又重新黏贴了一遍,结果就好了…

②上面说的icomoon文件夹下载后不要删除，是因为我们后面追加字体图标的话会用到！所以一定不要删除哦！

三、追加字体图标

1.注意找到我们之前icomoon文件夹中的selection.json文件

2.打开icomoon网站，点击IcoMoon App

3.点击Import Icons，导入我们的selection.json 文件，会发现之前的字体图标出现了。（这里我们用的是最开始生成手机字体图标的文件夹），然后再选择我们新要的图标，之后selection()出现我们选择了字数，点击右面的Generate Font生成字体图标。

![在这里插入图片描述](https://img-/134424943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQwNTM5NQ==,size_16,color_FFFFFF,t_70

4.我们新选择的字体图标和之前的手机字体图标，都会出现，（这里是没有出现，因为在上面，截图截不全，被遮住了，但是通过下面的selection(4)可以看出的确是有四个字体图标的），点击右面的Download，下载会得到icomoon文件夹，这个时候就可以把之前的icomoon文件夹删除掉了。

5.将项目中之前的fonts文件夹删除，然后换成新的icomoon文件夹中的fonts文件夹。之后打开icomoon文件夹中的demo.html网页，将我们需要的字体图标，粘贴到测试字体图标.html文件中，这里我们选择第一个小房子。

7.可以根据自己的需要设置一下样式，我之前已经给span元素设置过了，这里就不再设置了。然后打开网页，会出现我们之前的手机字体图标，和小房子字体图标。

四、如何将icomoon上面的字体图标修改成我们想要的样子

1.比如我们想要一个向下的三角形，而iconmoon上面的字体图标小三角是向上的。

①那么我们可以点击网站上方小笔一样的编辑按钮

②之后点击我们需要调整的字体图标，这个向右的小三角，会弹出左面的框，然后我们点击旋转按钮，将小三角，旋转到我们想要的方向，之后，点击Duplicate保存生成字体图标即可。

①

②

2.那么我们就会得到一个向下的箭头了。

icomoon小tips：

① 我们在项目中使用字体图标的话一般是用标签。