阿里妈妈字体图标的使用（无色+有色）

真的想不出名儿

已于 2023-06-02 11:11:24 修改

阅读量363

点赞数

分类专栏： css 文章标签： css 前端

于 2023-06-02 10:47:18 首次发布

本文链接：https://blog.csdn.net/ioncannontic/article/details/131001750

版权

css 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

步骤：

进入iconfont-阿里巴巴矢量图标库
将图标添加至购物车
点击购物车，添加至项目
下载到本地
引用iconfont.css
打开demo_index.html文件查看引入图标的类名
复制类名

使用无色的字体图标

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.css">
    <title>Document</title>
</head>

<body>
    <!-- <span class="iconfont 图标的类名"></span> -->
    <span class="iconfont icon-jingyingjihua"></span>
</body>

</html>

图标太小，可以自定义其他类名修改样式

使用有色的字体图标

在无色图标基础上，引入js文件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.css">
    <script src="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.js"></script>
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <!-- <span class="iconfont 图标的类名"></span> -->
    <span class="iconfont icon-jingyingjihua"></span>
</body>

</html>

设置固定样式（必写）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.css">
    <script src="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.js"></script>
    <title>Document</title>
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!-- <span class="iconfont 图标的类名"></span> -->
    <span class="iconfont icon-jingyingjihua"></span>
</body>

</html>

使用svg标签，在href=“# 字体图标的类名”

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.css">
    <script src="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.js"></script>
    <title>Document</title>
    <style>
        .small {
            font-size: 12px;
        }

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

<body>
    <!-- <span class="iconfont 图标的类名"></span> -->
    <!-- <span class="iconfont icon-jingyingjihua"></span> -->
    <svg class="icon small" aria-hidden="true">
        <use xlink:href="#icon-jingyingjihua"></use>
    </svg>
</body>

</html>