如何使用阿里图标库

小段爱前端

已于 2023-07-26 23:31:20 修改

阅读量2k

点赞数 5

分类专栏： html5&css3 文章标签：前端

于 2023-07-26 02:13:12 首次发布

本文链接：https://blog.csdn.net/weixin_52954097/article/details/131928920

版权

html5&css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一、引入阿里图标库，并解决多个图标重新引入后不显示的情况

1、打开iconfont官网，注册登录。
iconfont-阿里巴巴矢量图标库
2、点击资源管理>我的项目>新建项目。

点击新建项目

3、项目创建完毕，在上方搜索框中，输入要使用的图标名称，找到需要的图标，右键添加至购物车。

4、点击图标上方购物车>添加至项目，通过右上角购物车查看，点击添加至项目

5、此时自动跳转到项目内，图标已经被添加，点击下载至本地。

6、下载后解压后的文件夹，整体复制粘贴至我们的项目目录中

7、在项目中引入iconfont.css文件。

8、下面要使用字体图标，创建一个i标签，添加两个类名：一个是iconfont，一个是字体图标的名字。见图

图标类名可以到图标库中选择font class 复制此代码

9、此时，浏览器中已展示出字体图标。还可以通过图标名称设置字体的样式，大小颜色等。（注意：用图标名称的类名去设置样式）

10、添加图标到这里就完成了。如果需要重新添加，更新项目中的图标。继续将需要的图标添加至购物车>添加至项目>点击查看在线链接>复制更新后的代码。

11、点击复制代码，ctrl+A全选，ctrl+c复制，替换掉项目目录中的iconfont.css文件。

此时，iconfont.css样式表更新完毕。继续建一个 i 标签，两个类名，设置样式，刷新页面，就看到图标已经显示。

12、如果图标不生效，打开阿里图标库中创建的项目，点击项目设置

第二、引入彩色图标

1、引入时增加一个js文件

而且在阿里图标里找到symbol,更新代码后，把js代码 ctrl+A全选，ctrl+c复制，替换掉项目目录中的iconfont.js文件。

2、在body中写这样的标签

3、样式需要起类名而且有一些固定的，可以直接复制

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>阿里字体图标</title>
    <!-- 1、引入阿里图标库的css文件和js文件 -->
    <link rel="stylesheet" href="./font_4183303_uawonw4stth/iconfont.css" />
    <script src="./font_4183303_uawonw4stth/iconfont.js"></script>
    <style>
      
      /* 2、设置icon类的样式 */

      .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }

      .box {
        font-size: 150px;
      }
      .icon-anquantianchong {
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <!-- 3、书写下面内容 ，在use标签中 href的值 是  #引入图标的名称 -->
    <svg class="icon icon-anquantianchong" aria-hidden="true">
      <use xlink:href="#icon-anquantianchong"></use>
    </svg>
   
  </body>
</html>

第三步，更快速的引用彩色图标，超级简单

1.打开在阿里图标库创建的项目，点击项目设置

2.把彩色勾上并保存

小段爱前端

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
如何使用阿里图标库

而且在阿里图标里找到symbol,更新代码后，把js代码 ctrl+A全选，ctrl+c复制，替换掉项目目录中的iconfont.js文件。8、下面要使用字体图标，创建一个i标签，添加两个类名：一个是iconfont，一个是字体图标的名字。11、点击复制代码，ctrl+A全选，ctrl+c复制，替换掉项目目录中的iconfont.css文件。4、点击图标上方购物车>添加至项目，通过右上角购物车查看，点击添加至项目。中，输入要使用的图标名称，找到需要的图标，右键添加至购物车。3、项目创建完毕，在上方。
复制链接

扫一扫

专栏目录