WEB端使用阿里图标

最新推荐文章于 2024-08-17 21:52:26 发布

Rindy94

最新推荐文章于 2024-08-17 21:52:26 发布

阅读量673

点赞数 3

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

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

版权

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

摘要由CSDN通过智能技术生成

阿里图标官网

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'