HTML5怎么应用图标库类名,阿里图标库使用

阿里图标库使用

有几种使用方法。

单个文件使用 - 直接下载文件， 如 .ai .png .svg

使用方法:

下载啊~

unicode - 写 html 字符编码

使用方法:

下载包含你选择的图标的字体文件 .eot .woff .ttf .svg

在 css 中引用字体及预设样式

在 html 中使用， 如 3

font-class - 样式类名

使用方法:

下载项目并引用样式 iconfont.css ， 也可以使用生成的 cdn 链接

在 html 中使用

symbol - svg 聚合

使用方法:

下载项目并引用 iconfont.js ， 也可以使用生成的 cdn 链接

预设样式

在 html 中使用

在 ant 的 icon 组件中使用

Icon 组件除了可以直接使用 ant 中自动的图标外， 还可以直接使用阿里图标库。

import { Icon } from 'antd';

const IconFont = Icon.createFromIconfontCN({

// 这个链接可以在线上生成， 或者下载并使用项目文件包中 iconfont.js

scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',

});

ReactDOM.render(

mountNode

);

提示

在线生成的 cdn 并不支持更新。 生成之后，无论在项目中新添加和删除图标， cdn 中的内容都不会改变， 也不能重新生成。

所以还是直接下载后使用吧。

​