iconfont-阿里图标库的使用

编程基础 • 2024-12-05 10:11 • 阅读 40

阿里巴巴iconfont的使用方式分为两种：

本地下载
线上引用

iconfont-阿里巴巴矢量图标库

前期准备

创建项目，添加icon图标。

1.本地使用

1.“1”“3”下载项目至本地

2. 参考：iconfont-阿里图标库的使用_阿里图标库iconfont-CSDN博客

2.线上引用

1.“1”“2”生成在线链接

Unicode ：

在 unicode 下，每个 icon 都有一个 unicode 编码，下面以 unicode 编码为` `的 icon 为例进行说明。

选择查看在线链接，然后复制在线生成的代码，比如下面是我复制的代码：

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */ @font-face { font-family: 'iconfont'; /* Project id  */ src: url('//at.alicdn.com/t/c/font__32h6iq9gfl2.woff2?t=91') format('woff2'), url('//at.alicdn.com/t/c/font__32h6iq9gfl2.woff?t=91') format('woff'), url('//at.alicdn.com/t/c/font__32h6iq9gfl2.ttf?t=91') format('truetype'); }

将此代码放进一个全局的样式文件中，比如 dcom.less、dcom.scss......
在页面中使用的时候：

<i class="iconfont">&#xe63f;</i>

Symbol：

在 Symbol下，选择查看在线链接，然后复制在线生成的代码，比如下面是我复制的代码：

//at.alicdn.com/t/c/font__32h6iq9gfl2.js

import '//at.alicdn.com/t/c/font__32h6iq9gfl2.js';

在svg标签中正常使用

<svg data-v-4a714f7d="" data-v-862e34a3="" class="svg-icon" aria-hidden="true"> <use data-v-4a714f7d="" xlink:href="#icon_dcom_1" fill="#ffffff"></use> </svg>

'#icon_dcom_1',是icon在Symbol下的名字，其中'icon_dcom_'是名称前缀，需要在项目设置里进行配置。

注：每次更新/变动图标库后，都需要进行重新生成在线链接并更新main.ts

Font class：

下载的css文件，运用和Symbol差不多

......

www.iconfont.cn网断了，暂停

今天的文章 iconfont-阿里图标库的使用分享到此就结束了，感谢您的阅读。

iconfont-阿里图标库 的使用

前期准备

1.本地使用

2.线上引用

相关推荐

iconfont-阿里图标库的使用