iconfont Demo

Unicode
Font class
Symbol

查看项目


健身房



书本



进行时钟



化妆_画板 1



整理箱



扫把



其它



TJ-Detail-做饭



其它



地图



电话



一键生成



感叹号



reload time



edit



未选中



未选中



选中



选中



选中_圆



选中



支付没选中



选中



清空



图片



星星



星星



分享



性别



星星



星星



半星



女



男



筛选



减



map pin.7



搜索



修改



必填



问号



首页



购物车



购物车



订单时间



我的



我的



对话框



对话框



对话框



设置



向上2



向上2



向上2



向上2



向上2



关闭1



加号1



减号



清空



清空



眼睛



手机



头像



微信支付



支付宝



QQ



微信



关闭-眼睛



地图-地标



关闭2



加号



关闭



加号



Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

支持按字体的方式去动态调整图标大小，颜色等等。
默认情况下不支持多色，直接添加多色图标会自动去色。

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

Unicode 使用步骤如下：

第一步：在 HTML 页面为字体增加 preload，提升字体加载速度：

<link rel="preload" href="//at.alicdn.com/t/font_1113967_f2i76hg0239.woff2" as="font" type="font/woff2" crossorigin="anonymous">

第二步：拷贝项目下面生成的 `@font-face`

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_1113967_f2i76hg0239.eot?t=1623592998508'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1113967_f2i76hg0239.eot?t=1623592998508#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//at.alicdn.com/t/font_1113967_f2i76hg0239.woff2?t=1623592998508') format('woff2'),
       url('//at.alicdn.com/t/font_1113967_f2i76hg0239.woff?t=1623592998508') format('woff'),
       url('//at.alicdn.com/t/font_1113967_f2i76hg0239.ttf?t=1623592998508') format('truetype'),
       url('//at.alicdn.com/t/font_1113967_f2i76hg0239.svg?t=1623592998508#iconfont') format('svg');
}

第三步：定义使用 iconfont 的样式

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

第四步：挑选相应图标并获取字体编码，应用于页面

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

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

健身房

.icon_category_sports
书本

.icon_category_teacher
进行时钟

.icon_status_0
化妆_画板 1

.icon_category_beautiful
整理箱

.icon_category_organize
扫把

.icon_category_clear
其它

.icon_category_other
TJ-Detail-做饭

.icon_category_cook
其它

.icon_category_all
地图

.icon_head_navigation_map
电话

.icon_telephone
一键生成

.icon_generate
感叹号

.icon_warning
reload time

.icon_loading
edit

.icon_edit2
未选中

.icon_status_1
未选中

.icon_checked2
选中

.icon_unchecked2
选中

.icon_status_-1
选中_圆

.icon_unchecked
选中

.icon_checked
支付没选中

.icon_unchecked1
选中

.icon_checked1
清空

.icon_clear2
图片

.icon_image
星星

.icon_collection_full
星星

.icon_star_full
分享

.icon_head_navigation_share
性别

.icon_gender_unknown
星星

.icon_star_empty
星星

.icon_collection_empty
半星

.icon_star_half
女

.icon_gender_female
男

.icon_gender_male
筛选

.icon_filter
减

.icon_delete2
map pin.7

.icon_map_location
搜索

.icon_search
修改

.icon_edit
必填

.icon_must_input
问号

.icon_head_navigation_help
首页

.icon_foot_navigation_home
购物车

.icon_foot_navigation_shopping_cart
购物车

.icon_shopping_cart
订单时间

.icon_foot_navigation_order
我的

.icon_head_navigation_account
我的

.icon_foot_navigation_account
对话框

.icon_head_navigation_message
对话框

.icon_message
对话框

.icon_foot_navigation_message
设置

.icon_head_navigation_setting
向上2

.icon_arrow_down
向上2

.icon_head_navigation_back
向上2

.icon_arrow_right
向上2

.icon_arrow_left
向上2

.icon_arrow_up
关闭1

.icon_head_navigation_close
加号1

.icon_addition
减号

.icon_subtraction
清空

.icon_clear
清空

.icon_head_navigation_clear
眼睛

.icon_eye_open
手机

.icon_mobile
头像

.icon_avatar
微信支付

.icon_payment_wechatpay
支付宝

.icon_payment_alipay
QQ

.icon_qq
微信

.icon_wechat
关闭-眼睛

.icon_eye_close
地图-地标

.icon_map_local
关闭2

.icon_delete
加号

.icon_create
关闭

.icon_close
加号

.icon_head_navigation_create

font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

使用步骤如下：

第一步：在 HTML 页面为字体增加 preload，提升字体加载速度：

<link rel="preload" href="//at.alicdn.com/t/font_1113967_f2i76hg0239.woff2" as="font" type="font/woff2" crossorigin="anonymous">

第二步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="//at.alicdn.com/t/font_1113967_f2i76hg0239.css">

第三步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon_xxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

健身房

#icon_category_sports
书本

#icon_category_teacher
进行时钟

#icon_status_0
化妆_画板 1

#icon_category_beautiful
整理箱

#icon_category_organize
扫把

#icon_category_clear
其它

#icon_category_other
TJ-Detail-做饭

#icon_category_cook
其它

#icon_category_all
地图

#icon_head_navigation_map
电话

#icon_telephone
一键生成

#icon_generate
感叹号

#icon_warning
reload time

#icon_loading
edit

#icon_edit2
未选中

#icon_status_1
未选中

#icon_checked2
选中

#icon_unchecked2
选中

#icon_status_-1
选中_圆

#icon_unchecked
选中

#icon_checked
支付没选中

#icon_unchecked1
选中

#icon_checked1
清空

#icon_clear2
图片

#icon_image
星星

#icon_collection_full
星星

#icon_star_full
分享

#icon_head_navigation_share
性别

#icon_gender_unknown
星星

#icon_star_empty
星星

#icon_collection_empty
半星

#icon_star_half
女

#icon_gender_female
男

#icon_gender_male
筛选

#icon_filter
减

#icon_delete2
map pin.7

#icon_map_location
搜索

#icon_search
修改

#icon_edit
必填

#icon_must_input
问号

#icon_head_navigation_help
首页

#icon_foot_navigation_home
购物车

#icon_foot_navigation_shopping_cart
购物车

#icon_shopping_cart
订单时间

#icon_foot_navigation_order
我的

#icon_head_navigation_account
我的

#icon_foot_navigation_account
对话框

#icon_head_navigation_message
对话框

#icon_message
对话框

#icon_foot_navigation_message
设置

#icon_head_navigation_setting
向上2

#icon_arrow_down
向上2

#icon_head_navigation_back
向上2

#icon_arrow_right
向上2

#icon_arrow_left
向上2

#icon_arrow_up
关闭1

#icon_head_navigation_close
加号1

#icon_addition
减号

#icon_subtraction
清空

#icon_clear
清空

#icon_head_navigation_clear
眼睛

#icon_eye_open
手机

#icon_mobile
头像

#icon_avatar
微信支付

#icon_payment_wechatpay
支付宝

#icon_payment_alipay
QQ

#icon_qq
微信

#icon_wechat
关闭-眼睛

#icon_eye_close
地图-地标

#icon_map_local
关闭2

#icon_delete
加号

#icon_create
关闭

#icon_close
加号

#icon_head_navigation_create

Symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

第一步：引入项目下面生成的 symbol 代码：

<script src="//at.alicdn.com/t/font_1113967_f2i76hg0239.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）：

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

第三步：挑选相应图标并获取类名，应用于页面：

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

Unicode 引用

第一步：在 HTML 页面为字体增加 preload，提升字体加载速度：

第二步：拷贝项目下面生成的 @font-face

第三步：定义使用 iconfont 的样式

第四步：挑选相应图标并获取字体编码，应用于页面

font-class 引用

第一步：在 HTML 页面为字体增加 preload，提升字体加载速度：

第二步：引入项目下面生成的 fontclass 代码：

第三步：挑选相应图标并获取类名，应用于页面：

Symbol 引用

第一步：引入项目下面生成的 symbol 代码：

第二步：加入通用 CSS 代码（引入一次就行）：

第三步：挑选相应图标并获取类名，应用于页面：

第二步：拷贝项目下面生成的 `@font-face`