icomoon图标字体的下载与使用

使用图标字体的原因

1、轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,不需要下载一个个图像。这样可以减少HTTP的请求数量,而且和HTML5的离线存储配合,可以对性能做出优化。

2、灵活性:不调字体可以像页面中的文字一样,通过font-size属性来对其进行大小的设置,而且还可以添加各种文字效果,如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话!

3、兼容性:图标字体支持现代浏览器,甚至是低版本的IE浏览器,所以可以放心的使用它。

4、相比于位图放大图片会出现失真、缩小又会浪费掉像素点,图标字体不会出现这种情况。

下载icomoon图标字符

链接: https://icomoon.io/#home.
进入icomoon官网首页,点击下面图片中红框的位置
《icomoon图标字体的下载与使用》
然后选择自己想要的图标(通过点击对于图标进行选择),如果想要全选就按照图中箭头指向的方式进行全选或取消选择。
《icomoon图标字体的下载与使用》
如果当前图标集不能满足需求,可以滑动滚动条至底部,点击从库添加图标,如下图所示。
《icomoon图标字体的下载与使用》
选择需要的图标集点击add进行添加。
《icomoon图标字体的下载与使用》

选择完成需要的图标以后就点击最下方的产生字型图标,对选中图标进行生成。
《icomoon图标字体的下载与使用》
点击生成后,就可以看到生成的对于图标集,然后在点击下载就会下载一个icomoon的压缩包。
《icomoon图标字体的下载与使用》
解压后,将文件夹中的fonts文件夹复制粘贴到当前项目的文件夹中,如果呀查看对于的图标可打开demo.html文件找到需要的图标字体。
《icomoon图标字体的下载与使用》

icomoon的使用

在demo.html文件中找到需要的图标,复制图标对应的小方框,将其放在需要显示的标签内。这里虽然复制的每一个小方框看起来都是一样的,但在使用上都是不一样的,所以要去复制相应的小方框。
《icomoon图标字体的下载与使用》
使用代码如下,这里是将其放在span标签内。

<span class="prep" ></span>
<span class="next" ></span>

然后找到icomoon文件夹中的style.css文件,打开复制下图中的css代码到当前文件的style中。

/* 字体声明 */
@font-face {
	 font-family: 'icomoon';
	 src:  url('fonts/icomoon.eot?26jsqa');
	 src:  url('fonts/icomoon.eot?26jsqa#iefix') format('embedded-opentype'),
	 url('fonts/icomoon.ttf?26jsqa') format('truetype'),
	 url('fonts/icomoon.woff?26jsqa') format('woff'),
	 url('fonts/icomoon.svg?26jsqa#icomoon') format('svg');
	 font-weight: normal;
	 font-style: normal;
	 font-display: block;
}

《icomoon图标字体的下载与使用》
接着再设置对应标签的font-family: ‘icomoon’; 具体代码如下:

.prep,.next{
		font-family: 'icomoon';
		font-size: 30px;
		corlor: #0f893d;
		cursor: pointer;
		padding-right: 10px;
}

如上代码,对于字体图标我们还可以设置字体的大小,颜色,关于对字体的设置都可以使用在字体图标上。

最后的使用的结果如下图:
《icomoon图标字体的下载与使用》

    原文作者:卜娴
    原文地址: https://blog.csdn.net/zbuxian/article/details/109360707
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞