阿里字体图标使用方法_阿里字体图标怎么使用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41395435/article/details/125307323

本文详细介绍了如何使用阿里图标库，包括注册、搜索图标、收藏、添加到项目、下载到本地、解压并使用。通过示例代码展示了在HTML中引入图标的方法，以及在Vue项目中导入CSS文件的步骤，帮助开发者快速掌握图标的应用。

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

1. 打开阿里图标链接这里

2. 注册，创建项目, 具体过程略。

3. 在搜索栏搜索对应图片，直接搜文字就行。

在这里插入图片描述

4. 找到想要的图片，点购物车和收藏。

在这里插入图片描述

5. 打开购物车就能看到刚刚收藏的图标，点击添加到项目。

在这里插入图片描述

6. 点开我的项目，下载到本地，这里还有其他方法，但是本文只写下载到本地的方法。

在这里插入图片描述

7. 下载下来是一个压缩包，解压，把里面的内容复制到fonts文件夹，当然文件夹也可以起别的名字。

在这里插入图片描述

8. 查看可以使用的图标，打开demo_index.html, 选择Symbol, 找到对应的图标和图标名称，#icon-xxxx这个就是图标名。

在这里插入图片描述

9. 使用图标- 打开html文件, 撸出下面的代码

在这里插入图片描述
上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./fonts/iconfont.js"></script>
    <style>
        .icon {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <h3>mmmmm</h3>
    <div>
        <p>aa</p>
        <p>bb</p>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tuijian"></use>
        </svg>
    </div>
</body>

</html>

10. 打开html查看效果.

在这里插入图片描述

或者引入css文件

例如在vue项目中，
1.在main.js 引入字体图标的css文件

// 导入字体图标
import './assets/fonts/iconfont.css'

2.直接在对应的html标签里面写图标名字就行

<i :class='iconfont icon-user'></i>

阿里字体图标使用方法

1. 打开阿里图标链接 这里

2. 注册，创建项目, 具体过程略。

3. 在搜索栏搜索对应图片，直接搜文字就行。

4. 找到想要的图片，点购物车和收藏。

5. 打开购物车就能看到刚刚收藏的图标，点击添加到项目。

6. 点开我的项目，下载到本地，这里还有其他方法，但是本文只写下载到本地的方法。

7. 下载下来是一个压缩包，解压，把里面的内容复制到fonts文件夹，当然文件夹也可以起别的名字。

8. 查看可以使用的图标，打开demo_index.html, 选择Symbol, 找到对应的图标和图标名称，#icon-xxxx这个就是图标名。

9. 使用图标- 打开html文件, 撸出下面的代码

10. 打开html查看效果.

或者引入css文件

收工，学废了吗！🤔

1. 打开阿里图标链接这里