CSS学习笔记之iconfont图标库的使用

紫玫瑰ABU

已于 2023-10-31 16:09:32 修改

阅读量4.1k

点赞数 3

文章标签：学习笔记 1024程序员节

于 2023-10-24 15:12:09 首次发布

本文链接：https://blog.csdn.net/weixin_52540797/article/details/133975245

版权

本文详细介绍了如何从阿里巴巴矢量图标库iconfont中使用单色和多色图标，包括代码示例和步骤，涉及在线和本地引入方式。

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

阿里巴巴矢量图标库iconfont-阿里巴巴矢量图标库

1、单色图标库

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font-veafwwbvy/iconfont.css">
</head>
<body>
    <i class="iconfont icon-anzhuoceshi"></i>
</body>
</html>

步骤

打开阿里巴巴矢量图标库，在素材库中选择单色图标库

选择一款单色图标并添加入库，点击进入购物车

下载所选择单色图标的代码

复制所下载的压缩文件夹

右击项目所在文件夹，点击在文件资源管理器中显示

粘贴压缩文件夹，并解压至项目文件夹中，如下图文件夹font-veafwwbvy

在VSCode中选择文件夹font-veafwwbvy下的iconfont.css中图标的类名，并复制类名，如下图

在html文件中，首先通过link引入iconfont.css的路径，其次，在class中粘贴图标类名

最终效果

2、多色图标库

1.在线引入

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://at.alicdn.com/t/c/font_4297416_g7ted2244pt.js"></script>
</head>
<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-a-Nodejs"></use>
    </svg>
</body>
</html>

步骤

打开阿里巴巴矢量图标库，在素材库中选择多色图标库 ,选择一款多色图标

将选择的多色图标添加入库，并且打开购物车

将购物车中选择的多色图标添加至项目

点击右上角新建文件图标，将多色图标添加到新建项目，点击确定

点击symbol，再点击查看在线链接

点击更新代码，弹出框选择确定

点击复制代码（在线路径），再选择所需要的多色图标，复制代码（多色图标的类名）

将两次复制的代码分别写入下列位置

最终效果图

2.本地引入

示例代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./iconfont.js"></script>
    <style>
        .icon{
            width: 2em;
            height: 2em;
        }
    </style>
</head>
<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-a-GoogleChrome"></use>
    </svg>
</body>
</html>

步骤

打开阿里巴巴矢量图标库，在素材库中选择多色图标库 ,选择一款多色图标