css之字体图标的下载，使用与追加

最新推荐文章于 2025-06-10 05:58:31 发布

Sarah~

最新推荐文章于 2025-06-10 05:58:31 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_42460304/article/details/89162118

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何从icomoon网站下载图标字体，并详细阐述了下载后的使用步骤，包括将fonts文件夹引入项目，设置CSS样式以及在HTML中应用。此外，还讲解了如何在icomoon中追加新的图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们平时在页面经常会看到一些小图标，比如放大镜，购物车，wifi等等。这些图标往往不是插入的图片，而是一种图标文字，可以改颜色，可以调大小。

一.图标的下载

图标下载有很多方法是，这里主要说明icomoom网站下载图标的方法，百度里面找到这个网站，等一会因为是国外网站，很慢。加载出来后看到如下图所示界面。

点击最右上角的icoMoom App，出现

选中后生成图标，点击右下角生成，然后弹出来界面再点击右下角下载。

二.图标的使用

下载的icomoom解压后，找到里面的fonts文件夹，引入到我们的代码1工程文件中。在css样式里面写入下列语句

	@font-face {  /*声明字体  引用字体*/
	    font-family: "icomoon";  /*我们自己起名字可以*/
	    src:  url('fonts/icomoon.eot?7kkyc2');
	  /* 必须和文件路径一致，所以是fonts */
	    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-style: normal;  /*倾斜字体正常*/
    }

就引用了这些字体，在html标签中复制icomoom里面demo文件中的小矩形框，再对其属性进行描述，所以完整的代码是

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        	@font-face {  /*声明字体  引用字体*/
	    font-family: "icomoon";  /*我们自己起名字可以*/
	    src:  url('fonts/icomoon.eot?7kkyc2');
	  /* 必须和文件路径一致，所以是fonts */
	    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-style: normal;  /*倾斜字体正常*/
    }
    .car{
    	font-family:"icomoon";
    	font-size:100px;
    }
    .aixin{
    	font-family:"icomoon";
    	color:pink;
       
    }
    </style>
    </head>
    <body>
    	<i class="car"></i>
    	<em class="aixin"></em>
    </body>
</html>

运行结果是：