阿里图标在线引用步骤备忘

最新推荐文章于 2025-05-22 10:33:08 发布

原创最新推荐文章于 2025-05-22 10:33:08 发布 · 4.2k 阅读

6 ·

CC 4.0 BY-SA版权

HTML and CSS 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何通过阿里图标官网在线使用图标资源的方法，包括搜索图标、生成在线链接及在HTML文件中的应用步骤。

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

在阿里图标官网上也有具体的使用方法,但是我想记录下来我的使用过程,方便日后查看.

登录账号,选择图标建成项目就略过了.

步骤1:

搜索具体需要的图标,选择加入项目

步骤2:

有三种方式,我选用Symbol方式,获得在线链接.

步骤3:

将在线链接放入html文件.
因为Symbol方式获得的是js文件,因此使用script标签.默认的是没有http的,我们要自己添加.

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

步骤4:

插入样式语句,在开始时只引用一次就够了,通用

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

步骤5:

在需要的地方插入html语句

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

步骤6:

获得对应图标名称

选中对应图标,选择复制代码.

将这个复制的代码(其实就是个名字),替换掉步骤5的 icon-xxx.

步骤7:

打开浏览器验证效果.

总结

以前都是下载下来的,现在使用在线引用不需要下载图标文件,也不需要管理它们,图标文件都在阿里图标库里,很方便.只是没有网络的时候不能访问了.而且每次新增图标,都需要重新生成链接.