icomoon使用方法

大菠萝学长

已于 2023-01-19 17:08:19 修改

阅读量633

点赞数 1

分类专栏： CSS 前端文章标签：前端 css html

于 2023-01-19 12:02:31 首次发布

本文链接：https://blog.csdn.net/zhxzrd/article/details/128733919

版权

前端同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

打开icomoon，选择想要的图标

在Selection中生成这些图标，在Font中下载生成压缩包，并解压。

将fonts文件夹与html文件放在同一个目录下。

复制图标方框位置对图标进行复制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*声明  要在样式中声明字体，表明这是我们自己定义的字体*/
    @font-face {
  	font-family: 'icomoon';
 	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,div{
        font-family: 'icomoon';
        font-size: 60px;
        color:red;
    }
    </style>
</head>
<body>
    <span></span>
    <div></div>
</body>
</html>

注意要对路径等进行声明，路径要正确。

过程中，可能会设计icomoon字体图标添加的问题，及字体图标的追加，正确操作步骤如下：

①选择要追加的图标，点击页面左上方Import Icons按钮。