WEB端使用阿里图标

最新推荐文章于 2025-06-11 13:43:41 发布

Rindy94

最新推荐文章于 2025-06-11 13:43:41 发布

阅读量754

点赞数 3

CC 4.0 BY-SA版权

分类专栏：文档文章标签： html css3 css

本文链接：https://blog.csdn.net/Rindy94/article/details/111502300

文档专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在Web端使用阿里图标的方法，包括Unicode引用、font-class引用和symbol引用。通过阿里图标官网，用户可以注册账号，选择需要的图标，然后在不同引用方式下复制对应的代码到CSS或HTML文件中，实现图标的展示。

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

阿里图标官网

web端需要插入小图标可以有三种实现方式（除了插入image图片）。

首先进入阿里图标官网注册账号，在资源管理里选择我的项目，找到+号选择新建项目，比如first-icon。
到图标库选择需要的图标添加入库，添加完成后在购物车里选择添加至项目first-icon。
进入我的项目，找到first-icon，这里有三种引用方式：Unicode引用、font-class引用以及symbol引用。

Unicode引用

在我的项目里选择Unicode并生成代码，将生成的代码复制到你的.css样式表中，比如

@font-face {
  font-family: 'iconfont';  /* project id 2284330 */
  src: url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.eot');
  src: url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.woff') format('woff'),
  url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2284330_bq0x2xghcxv.svg#iconfont') format('svg');
}

定义使用iconfont的样式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

挑选相应的图标并获取字体编码，复制图标代码应用图标

<span class="iconfont">&#xe699;</span>

font-class引用

在我的项目里选择Font class并生成代码，将生成的代码复制到你的.html文件中，比如

<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2284330_oyyaj8n4uo.css"/>

选择相应的图标并获取类名iconfont，复制图标代码应用图标

<span class="iconfont">&#xe699;</span>

symbol引用

在我的项目里选择Symbol并生成代码，将生成的代码复制到你的.html文件中，比如

<script type="text/javascript" src="//at.alicdn.com/t/font_2284330_bq0x2xghcxv.js"></script>

加入通用css代码（引入一次就行）

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

选择相应的图标并获取类名，复制图标代码给href值应用图标

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