# iconfont Demo

#

- 
  警示 感叹号 ！2
  &#xe7f4;
- 
  刷新
  &#xe6e0;
- 
  刷新
  &#xe63b;
- 
  刷新
  &#xe796;
- 
  资讯
  &#xe64e;
- 
  股指
  &#xe65e;
- 
  资讯
  &#xe645;
- 
  资讯
  &#xe771;
- 
  GDP
  &#xe884;
- 
  每股指标
  &#xe6dc;
- 
  资讯
  &#xe638;
- 
  gdp
  &#xe63f;
- 
  股指
  &#xe639;
- 
  货币金融服务
  &#xe649;
- 
  GDP
  &#xe658;
- 
  GDP
  &#xe648;
- 
  产品-货币金融服务
  &#xe63a;
- 
  产品-货币金融服务
  &#xe663;
- 
  债券-次级债券
  &#xe671;
- 
  股指期权
  &#xe7a2;
- 
  GDP
  &#xe692;
- 
  债券
  &#xe68e;
- 𐃲
  债券
  &#x100f2;
- 
  回到顶部
  &#xe73c;
- 
  回到顶部
  &#xe637;
- 
  向右展开
  &#xe624;
- 
  向右展开3
  &#xe7d3;
- 
  右展开
  &#xe739;
- 
  向右展开
  &#xe635;
- 
  右展开-默认
  &#xe636;
- 
  左右展开
  &#xe65c;
- 
  左右
  &#xe634;
- 
  箭头_左右切换
  &#xeb0d;
- 
  左右拖
  &#xe673;
- 
  左右拉伸
  &#xe652;
- 
  10x6向右展开三角
  &#xe63e;
- 
  右展开
  &#xe684;
- 
  向右展开
  &#xe651;
- 
  向右展开
  &#xe693;
- 
  左右展开
  &#xec3a;
- 
  icon-rgb_指标智能管理
  &#xe6fa;
- 
  指标管理
  &#xe72a;
- 
  销售指标
  &#xe664;
- 
  收藏
  &#xe630;
- 
  等级一
  &#xe631;
- 
  等级二
  &#xe632;
- 
  等级三
  &#xe633;
- 
  星星
  &#xe80d;
- 
  星星
  &#xefeb;
- 
  24gl-starEmpty
  &#xe8c4;
- 
  星星
  &#xe75b;
- 
  lv2
  &#xe625;
- 
  lv1
  &#xe629;
- 
  星星
  &#xe607;
- 
  活动,五角星,星
  &#xe61f;
- 
  星星
  &#xe870;
- 
  五角星
  &#xe608;
- 
  星星
  &#xe65d;
- 
  星星
  &#xe621;
- 
  星星
  &#xe622;
- 
  五角星
  &#xe623;
- 
  星星
  &#xe62f;
- 
  升级
  &#xe62c;
- 
  升版-升级
  &#xe643;
- 
  版本升级
  &#xe62a;
- 
  ebr_升级
  &#xe61e;
- 
  facebook_facebook52
  &#xe606;
- 
  twitter
  &#xe63d;
- 
  reddit
  &#xea03;
- 
  discord
  &#xe617;
- 
  telegram
  &#xe618;
- 
  踩2
  &#xe691;
- 
  踩
  &#xe602;
- 
  踩1
  &#xe68f;
- 
  点赞
  &#xe616;
- 
  点赞
  &#xe619;
- 
  分享
  &#xe601;
- 
  cai
  &#xe62e;
- 
  点赞
  &#xe6bf;
- 
  小三角down
  &#xe614;
- 
  小三角up
  &#xe615;
- 
  搜索_填充
  &#xe694;
- 
  搜索
  &#xe60e;
- 
  通知
  &#xe612;
- 
  24gl-folderOpen
  &#xeabe;
- 
  ic_candleline
  &#xe613;
- 
  个人 (9)
  &#xe641;
- 
  美元6
  &#xe738;
- 
  美元
  &#xe64b;
- 
  美元
  &#xeb1a;
- 
  美元_o
  &#xeba1;
- 
  24gl-obelus
  &#xe88f;
- 
  24gl-plusMinus
  &#xe890;
- 
  书本
  &#xe60d;
- 
  4-柱状图
  &#xe628;
- 
  美元
  &#xe90d;
- 
  箭头_左右切换
  &#xe6eb;
- 
  美元
  &#xe626;
- 
  代码,分支,分流,分叉
  &#xe993;
- 
  书本-book2
  &#xe644;
- 
  正负
  &#xe73d;
- 
  钱包
  &#xebb4;
- 
  鞋/包
  &#xe600;
- 
  美元
  &#xe620;
- 
  金币
  &#xe6c8;
- 
  美元
  &#xe6c1;
- 
  美元1
  &#xe733;
- 
  409折线图-线性
  &#xe904;
- 
  钱包
  &#xe646;
- 
  闪电
  &#xe799;
- 
  锤子
  &#xe61b;
- 
  折线图_o
  &#xebb3;
- 
  房子
  &#xe603;
- 
  钱包
  &#xe61c;
- 
  图标44
  &#xe610;
- 
  房子01
  &#xe611;
- 
  建筑
  &#xe64a;
- 
  图表
  &#xe61d;
- 
  文件夹
  &#xe74a;
- 
  时钟
  &#xe60c;
- 
  用户管理
  &#xe62d;
- 
  图表
  &#xe659;
- 
  房子
  &#xe64f;
- 
  槌子,锤子,敲打,工具
  &#xe87c;
- 
  美元
  &#xe73f;
- 
  日历
  &#xe71a;
- 
  电池
  &#xe62b;
- 
  电源管理
  &#xe605;
- 
  验证码
  &#xe60a;
- 
  分类
  &#xe60b;
- 
  券
  &#xe60f;
- 
  常用_发现
  &#xe6b0;
- 
  常用_发现 副本
  &#xe6ba;
- 
  常用_链接 副本
  &#xe6bb;
- 
  消息
  &#xe67c;
- 
  网络
  &#xe627;
- 
  相机
  &#xe609;
- 
  手机
  &#xe61a;
- 
  定位
  &#xe604;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

    @font-face {
      font-family: 'i';
      src: url('iconfont.woff2?t=1693193677535') format('woff2'),
           url('iconfont.woff?t=1693193677535') format('woff'),
           url('iconfont.ttf?t=1693193677535') format('truetype');
    }

### 第二步：定义使用 iconfont 的样式

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

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

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

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

- 警示 感叹号 ！2
  .ijingshigantanhao2
- 刷新
  .ishuaxin
- 刷新
  .ishuaxin1
- 刷新
  .ishuaxin2
- 资讯
  .izixun
- 股指
  .iguzhi
- 资讯
  .izixun1
- 资讯
  .izixun2
- GDP
  .iGDP
- 每股指标
  .imeiguzhibiao
- 资讯
  .izixun3
- gdp
  .igdp
- 股指
  .iguzhi1
- 货币金融服务
  .iicon_jinrongfuwu
- GDP
  .iGDP1
- GDP
  .iGDP2
- 产品-货币金融服务
  .ichanpin-huobijinrongfuwu
- 产品-货币金融服务
  .ichanpin-huobijinrongfuwu1
- 债券-次级债券
  .izhaiquan-cijizhaiquan
- 股指期权
  .iguzhiqiquan
- GDP
  .iGDP3
- 债券
  .izhaiquan
- 债券
  .izhaiquan1
- 回到顶部
  .ihuidaodingbu
- 回到顶部
  .ihuidaodingbu1
- 向右展开
  .ixiangyouzhankai2
- 向右展开3
  .ixiangyouzhankai3
- 右展开
  .iarrow-right-fill-03
- 向右展开
  .ixiangyouzhankai4
- 右展开-默认
  .iyouzhankai-moren
- 左右展开
  .izuoyouzhankai
- 左右
  .izuoyou
- 箭头_左右切换
  .ijiantou_zuoyouqiehuan1
- 左右拖
  .izuoyoutuo
- 左右拉伸
  .izuoyoulashen
- 10x6向右展开三角
  .i10x6xiangyouzhankaisanjiao
- 右展开
  .iyouzhankai
- 向右展开
  .ixiangyouzhankai
- 向右展开
  .ixiangyouzhankai1
- 左右展开
  .izuoyouzhankai1
- icon-rgb_指标智能管理
  .iicon-rgb_zhibiaozhinengguanli
- 指标管理
  .izhibiaoguanli
- 销售指标
  .ixiaoshouzhibiao
- 收藏
  .ishoucang
- 等级一
  .ilevel1
- 等级二
  .ilevel2
- 等级三
  .ilevel3
- 星星
  .ixingxing5
- 星星
  .ixingxing6
- 24gl-starEmpty
  .i24gl-starEmpty
- 星星
  .ixingxing7
- lv2
  .iicon-test1
- lv1
  .iicon-test2
- 星星
  .ixingxing
- 活动,五角星,星
  .iiconzhengli-
- 星星
  .ixingxing1
- 五角星
  .istart
- 星星
  .istar
- 星星
  .ixingxing2
- 星星
  .ixingxing3
- 五角星
  .istart1
- 星星
  .ixingxing4
- 升级
  .ishengji
- 升版-升级
  .ishengban-shengji
- 版本升级
  .ibanbenshengji-05
- ebr_升级
  .iebr_shengji
- facebook_facebook52
  .ifacebookfacebook52
- twitter
  .itwitter-fill
- reddit
  .ireddit
- discord
  .idiscord
- telegram
  .itelegram
- 踩2
  .icai4
- 踩
  .icai1
- 踩1
  .icai2
- 点赞
  .idianzan
- 点赞
  .idianzan1
- 分享
  .ifenxiang
- cai
  .icai
- 点赞
  .iz-like
- 小三角down
  .ixiaosanjiaodown
- 小三角up
  .ixiaosanjiaoup
- 搜索_填充
  .isousuotianchong
- 搜索
  .isousuo
- 通知
  .itongzhi
- 24gl-folderOpen
  .igl-folderOpen
- ic_candleline
  .iiccandleline
- 个人 (9)
  .igeren9
- 美元6
  .imeiyuan6
- 美元
  .imeiyuan2
- 美元
  .imeiyuan3
- 美元_o
  .imeiyuan_o
- 24gl-obelus
  .i24gl-obelus
- 24gl-plusMinus
  .i24gl-plusMinus
- 书本
  .ishuben
- 4-柱状图
  .i-zhuzhuangtu
- 美元
  .imeiyuan4
- 箭头_左右切换
  .ijiantou_zuoyouqiehuan
- 美元
  .i9meiyuan
- 代码,分支,分流,分叉
  .icode-branch
- 书本-book2
  .ishuben-book2
- 正负
  .izhengfu
- 钱包
  .iqianbao-copy
- 鞋/包
  .ixiebao
- 美元
  .i30
- 金币
  .ijinbi
- 美元
  .iiconset0294
- 美元1
  .imeiyuan1
- 409折线图-线性
  .izhexiantu-xianxing
- 钱包
  .iqianbao
- 闪电
  .ishandian
- 锤子
  .ichuizi
- 折线图_o
  .izhexiantu_o
- 房子
  .iicon-test
- 钱包
  .iqianbao1
- 图标44
  .itubiao
- 房子01
  .ithin-_home_flat
- 建筑
  .ibuilding
- 图表
  .itubiao1
- 文件夹
  .iwenjianjia
- 时钟
  .ishizhong
- 用户管理
  .iyonghuguanli_huaban
- 图表
  .itubiao2
- 房子
  .ifangzi
- 槌子,锤子,敲打,工具
  .ihammer
- 美元
  .imeiyuan
- 日历
  .irili
- 电池
  .idianchi
- 电源管理
  .ichangyongtubiao_dianyuanguanlixuanzhong
- 验证码
  .ichangyongtubiao-fuben-33
- 分类
  .ichangyongtubiao-fuben-41
- 券
  .ichangyongtubiao-fuben-60
- 常用_发现
  .ichangyong_faxian
- 常用_发现 副本
  .ia-changyong_faxianfuben
- 常用_链接 副本
  .ia-changyong_lianjiefuben
- 消息
  .ixiaoxi
- 网络
  .iwangluo
- 相机
  .ixiangji
- 手机
  .ishouji
- 定位
  .idingwei

## font-class 引用

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

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

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

使用步骤如下：

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

    <link rel="stylesheet" href="./iconfont.css">

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

    <span class="i ixxx"></span>

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

- 警示 感叹号 ！2
  #ijingshigantanhao2
- 刷新
  #ishuaxin
- 刷新
  #ishuaxin1
- 刷新
  #ishuaxin2
- 资讯
  #izixun
- 股指
  #iguzhi
- 资讯
  #izixun1
- 资讯
  #izixun2
- GDP
  #iGDP
- 每股指标
  #imeiguzhibiao
- 资讯
  #izixun3
- gdp
  #igdp
- 股指
  #iguzhi1
- 货币金融服务
  #iicon_jinrongfuwu
- GDP
  #iGDP1
- GDP
  #iGDP2
- 产品-货币金融服务
  #ichanpin-huobijinrongfuwu
- 产品-货币金融服务
  #ichanpin-huobijinrongfuwu1
- 债券-次级债券
  #izhaiquan-cijizhaiquan
- 股指期权
  #iguzhiqiquan
- GDP
  #iGDP3
- 债券
  #izhaiquan
- 债券
  #izhaiquan1
- 回到顶部
  #ihuidaodingbu
- 回到顶部
  #ihuidaodingbu1
- 向右展开
  #ixiangyouzhankai2
- 向右展开3
  #ixiangyouzhankai3
- 右展开
  #iarrow-right-fill-03
- 向右展开
  #ixiangyouzhankai4
- 右展开-默认
  #iyouzhankai-moren
- 左右展开
  #izuoyouzhankai
- 左右
  #izuoyou
- 箭头_左右切换
  #ijiantou_zuoyouqiehuan1
- 左右拖
  #izuoyoutuo
- 左右拉伸
  #izuoyoulashen
- 10x6向右展开三角
  #i10x6xiangyouzhankaisanjiao
- 右展开
  #iyouzhankai
- 向右展开
  #ixiangyouzhankai
- 向右展开
  #ixiangyouzhankai1
- 左右展开
  #izuoyouzhankai1
- icon-rgb_指标智能管理
  #iicon-rgb_zhibiaozhinengguanli
- 指标管理
  #izhibiaoguanli
- 销售指标
  #ixiaoshouzhibiao
- 收藏
  #ishoucang
- 等级一
  #ilevel1
- 等级二
  #ilevel2
- 等级三
  #ilevel3
- 星星
  #ixingxing5
- 星星
  #ixingxing6
- 24gl-starEmpty
  #i24gl-starEmpty
- 星星
  #ixingxing7
- lv2
  #iicon-test1
- lv1
  #iicon-test2
- 星星
  #ixingxing
- 活动,五角星,星
  #iiconzhengli-
- 星星
  #ixingxing1
- 五角星
  #istart
- 星星
  #istar
- 星星
  #ixingxing2
- 星星
  #ixingxing3
- 五角星
  #istart1
- 星星
  #ixingxing4
- 升级
  #ishengji
- 升版-升级
  #ishengban-shengji
- 版本升级
  #ibanbenshengji-05
- ebr_升级
  #iebr_shengji
- facebook_facebook52
  #ifacebookfacebook52
- twitter
  #itwitter-fill
- reddit
  #ireddit
- discord
  #idiscord
- telegram
  #itelegram
- 踩2
  #icai4
- 踩
  #icai1
- 踩1
  #icai2
- 点赞
  #idianzan
- 点赞
  #idianzan1
- 分享
  #ifenxiang
- cai
  #icai
- 点赞
  #iz-like
- 小三角down
  #ixiaosanjiaodown
- 小三角up
  #ixiaosanjiaoup
- 搜索_填充
  #isousuotianchong
- 搜索
  #isousuo
- 通知
  #itongzhi
- 24gl-folderOpen
  #igl-folderOpen
- ic_candleline
  #iiccandleline
- 个人 (9)
  #igeren9
- 美元6
  #imeiyuan6
- 美元
  #imeiyuan2
- 美元
  #imeiyuan3
- 美元_o
  #imeiyuan_o
- 24gl-obelus
  #i24gl-obelus
- 24gl-plusMinus
  #i24gl-plusMinus
- 书本
  #ishuben
- 4-柱状图
  #i-zhuzhuangtu
- 美元
  #imeiyuan4
- 箭头_左右切换
  #ijiantou_zuoyouqiehuan
- 美元
  #i9meiyuan
- 代码,分支,分流,分叉
  #icode-branch
- 书本-book2
  #ishuben-book2
- 正负
  #izhengfu
- 钱包
  #iqianbao-copy
- 鞋/包
  #ixiebao
- 美元
  #i30
- 金币
  #ijinbi
- 美元
  #iiconset0294
- 美元1
  #imeiyuan1
- 409折线图-线性
  #izhexiantu-xianxing
- 钱包
  #iqianbao
- 闪电
  #ishandian
- 锤子
  #ichuizi
- 折线图_o
  #izhexiantu_o
- 房子
  #iicon-test
- 钱包
  #iqianbao1
- 图标44
  #itubiao
- 房子01
  #ithin-_home_flat
- 建筑
  #ibuilding
- 图表
  #itubiao1
- 文件夹
  #iwenjianjia
- 时钟
  #ishizhong
- 用户管理
  #iyonghuguanli_huaban
- 图表
  #itubiao2
- 房子
  #ifangzi
- 槌子,锤子,敲打,工具
  #ihammer
- 美元
  #imeiyuan
- 日历
  #irili
- 电池
  #idianchi
- 电源管理
  #ichangyongtubiao_dianyuanguanlixuanzhong
- 验证码
  #ichangyongtubiao-fuben-33
- 分类
  #ichangyongtubiao-fuben-41
- 券
  #ichangyongtubiao-fuben-60
- 常用_发现
  #ichangyong_faxian
- 常用_发现 副本
  #ia-changyong_faxianfuben
- 常用_链接 副本
  #ia-changyong_lianjiefuben
- 消息
  #ixiaoxi
- 网络
  #iwangluo
- 相机
  #ixiangji
- 手机
  #ishouji
- 定位
  #idingwei

## Symbol 引用

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

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

使用步骤如下：

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

    <script src="./iconfont.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>