记录一下自己学习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:
① 我们在项目中使用字体图标的话一般是用标签。
②使用自己图标的时候,要先声明,再引用,之后在标签中调用,缺一不可。
③不要删掉下载下来的icomoon的文件夹!
如果觉得《字体图标库-icomoon的使用(详细)》对你有帮助,请点赞、收藏,并留下你的观点哦!