前端字体图标的使用（阿里、icomoon）

最新推荐文章于 2025-06-11 14:46:06 发布

原创最新推荐文章于 2025-06-11 14:46:06 发布 · 1.5w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#字体图标 #阿里字体图标 #icomoon字体图标

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在项目中使用阿里图标库和icomoon图标库的字体图标资源。包括如何添加图标到项目、声明字体文件及使用不同方式展示图标。

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

阿里字体图标使用

首先去阿里图标库官网：http://www.iconfont.cn/
搜索需要的图标库 ——>加入购物车——>点击购物车——>添加到项目（如果有项目直接加入需要的项目，没有则新建项目）
在”图标管理” 中可以查看我的项目

这里写图片描述

1、Unicode方式在项目中进行使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>字体图标使用</title>
        <style>
            /*
             第一步：
               在样式里面申明字体
             * */
            @font-face {
                  font-family: 'iconfont';  /* project id 551814 */
                  src: url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.eot');
                  src: url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.eot?#iefix') format('embedded-opentype'),
                  url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.woff') format('woff'),
                  url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.ttf') format('truetype'),
                  url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.svg#iconfont') format('svg');
                }
            .iconfont{
                  font-family:"iconfont" !important;
                  font-size: 16px;
                  font-style: normal;
                  -webkit-font-smoothing: antialiased;
                  -webkit-text-stroke-width: 0.2px;
                  -moz-osx-font-smoothing: grayscale;
                }
        </style>
    </head>
    <body>
        <i class="iconfont">&#xe628;</i>
    </body>
</html>

2、Font class方式在项目中进行使用

引入样式表
 <link rel="stylesheet" href="http://at.alicdn.com/t/font_619016_c52q8qlz6avsfw29.css">

使用

 <i class="icon iconfont icon-31dianpu"></i>
 <i class="icon iconfont icon-gongnengjianyi"></i>

这样就可以看到效果了！

注意：Unicode方式，当每次在图标库内加入新的标签时，需要重新copy 项目生成的在线链接@font-face，否则新的图标将会无效； Font class 在使用的时候要添加icon iconfont两个属性

icomoon字体图标使用

首先去icomoon图标库官网：https://icomoon.io/app/#/select
选择你需要的图标，同时页面会有其他的一些功能，自己可以摸索

这里写图片描述

选择完成后，会有selection（个数），同时点击右边的Generate Font按钮进行下载

这里写图片描述

点击Download下载

把压缩包里面的fonts拷贝到你的项目
使用icomoon字体图标，打开压缩包的demo.html，选择你需要的图标

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            @font-face {
                font-family: 'icomoon';
                src: url('../fonts/icomoon.eot?q0tv6r');
                src: url('../fonts/icomoon.eot?q0tv6r#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?q0tv6r') format('truetype'), url('../fonts/icomoon.woff?q0tv6r') format('woff'), url('../fonts/icomoon.svg?q0tv6r#icomoon') format('svg');
                font-weight: normal;
                font-style: normal;
            }

            [class^="icon-"],
            [class*=" icon-"] {
                /* use !important to prevent issues with browser extensions that change fonts */
                font-family: 'icomoon' !important;
                speak: none;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                /* Better Font Rendering =========== */
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
            div{
                font-family: "icomoon";
            }
        </style>
    </head>

    <body>
        <div ></div>
    </body>

</html>