阿里巴巴字体图标库使用及更新方法

陈福国

已于 2022-08-29 22:37:01 修改

阅读量2.1k

点赞数 6

分类专栏：前端文章标签： html 陈福国陈福国前端前端 icon字体

于 2021-08-11 23:07:44 首次发布

本文链接：https://blog.csdn.net/qq_45112637/article/details/119619427

版权

前端专栏收录该内容

12 篇文章 5 订阅

订阅专栏

1、打开iconfont官网，注册登录。
https://www.iconfont.cn/
2、点击资源管理>我的项目>新建项目。
在这里插入图片描述
右边点击新建项目
3、项目创建完毕，在上方搜索框中，输入要使用的图标名称，找到需要的图标，右键添加至购物车。

4、点击右上角的购物车>添加至项目，选择刚刚创建的项目，点击确定。

5、此时自动跳转到项目内，图标已经被添加，点击下载至本地。
在这里插入图片描述
6、下载后的文件，解压后，将整个文件夹放在你的项目目录中，再在你的项目中引入iconfont.css文件。

7、下面要使用字体图标，创建一个i标签，添加两个类名：一个是iconfont，一个是字体图标的名字。见图：
在这里插入图片描述
8、此时，浏览器中已展示出字体图标。还可以通过图标名称设置字体的样式，大小颜色等。（注意：用图标名称的类名去设置样式）

9、添加图标到这里就完成了。如果需要重新添加，更新项目中的图标。继续将需要的图标添加至购物车>添加至项目>点击更新代码。
在这里插入图片描述
点进更新好的css样式文件：

10、将更新好的代码，ctrl+A全选，ctrl+c复制，替换掉项目目录中的iconfont.css文件。

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

（提示：图标名称可以在iconfont的项目中复制，在css样式表中找起来比较麻烦）

2.保留有色图标

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    //1、引入css 和js样式
    <link rel="stylesheet" href="./iconFont/iconfont.css">
    <script src="./iconFont/iconfont.js"></script>
    
    <style>
        // 2、设置icon类的样式
        
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
	
        .box {
            font-size: 150px;
        }
    </style>


</head>

<body>
    //3. 书写下面内容  主要  use标签中  href 值中 #后面为引入图标的名称
    <svg class="icon" aria-hidden="true"> 
        <use xlink:href="#icon-baoxiang"></use> 
    </svg> 
</body>

</html>