阿里巴巴矢量图标库的应用（字体图标）_怎么把文字加在阿里矢量图中间-CSDN博客

本文介绍了iconfont图标使用流程，包括放置图标入库、下载代码、解压并根据说明文档使用。还阐述了两种图标类型，字体图标实质为文字，可改变大小和颜色，需引入CSS文件；彩色字体图标需引入js文件，在style中写CSS，在body中写svg标签。

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

网址:https://www.iconfont.cn/

流程：放置于图标上——添加入库——再点击右上角的库（购物车）——点击下载代码——解压——打开说明文档（html）（symbol下才有彩色图标）——根据说明文档使用

类型一：字体图标
实质为文字
可以改变图标大小、颜色
如font-size:18px; color:#A4579D
用法：
引入CSS文件，即引入外部样式表.文件名.CSS，使用link标签来关联.CSS文件,输入link，再回车自动补全，再写入正确路径

在这里插入图片描述

类型二：彩色字体图标
用法：
引入js文件——在style中写一段CSS（设置字体图标的格式）——在body中写svg标签，在href处根据需要写上对应的字体图标名称，在html文件处可以看

<!DOCTYPE>

<head>
    <title>字体图标</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <link rel="stylesheet" href="font/iconfont.css">

    <script src="font/iconfont.js" type="text/javascript" charset=utf-8></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            color: white;
            background: brown;
            width: 250px;
            margin: 50px;
        }
        ul li:first-child{
            background-color: red;
        }
        ul li{
            height: 45px;line-height: 45px;
            padding-left: 10px;
            font-size: 18px;
            font-weight: bold;
        }
        ul li span{
            padding-right: 10px;
            font-weight: normal;
        }
        .iconfont{
            font-size: 18px;
        }

        .icon{
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            font-size: 60px;
        }
    </style>
</head>

<body>
    <ul>
        <li><span class="iconfont icon-002-drum"></span>花</li>
        <li><span class="iconfont icon-001-confetti"></span>花花</li>
        <li><span class="iconfont icon-005-sakura"></span>花花哦</li>
        <li><span class="iconfont icon-006-sakura"></span>花花</li>
    </ul>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-005-sakura"></use>
    </svg>
</body>

</html>

在这里插入图片描述