阿里字体图标之Symbol用法

最新推荐文章于 2025-05-27 10:53:25 发布

㼛思雨

最新推荐文章于 2025-05-27 10:53:25 发布

阅读量1.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： HTML5和CSS3进阶文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_45147894/article/details/108611416

HTML5和CSS3进阶专栏收录该内容

37 篇文章

订阅专栏

本文介绍了如何在项目中使用阿里字体图标Symbol方法，包括三步：引入symbol代码，添加通用CSS，选择图标并应用到页面。通过这些步骤，开发者可以轻松地在页面中展示阿里字体图标。

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

第一步：下载阿里字体图标Symbol文件包并解压。

第二步：把压缩后的文件全部放入自己的项目文件中。

第1步：引入项目下面生成的 symbol 代码：

<script src="./iconfont.js"></script>

第2步：加入通用 CSS 代码（引入一次就行）：

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

第3步：挑选相应图标并获取类名，应用于页面：

<svg class="iconfont" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

第三步：#icon-xxx改为其中需要用的哪个图标：例如下面一个#icon-position

完整代码：

<!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="fonts/iconfont.js"></script>
    <style>
        .iconfont {
            width: 1em;/*可以改变数字来进行改变字体图标的大小*/
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div>
        <svg class="iconfont" aria-hidden="true">
            <use xlink:href="#icon-position"></use>
        </svg>
    </div>
</body>

</html>