iconfont Demo

#

- 
  决策分析
  &#xe6ec;
- 
  附件下载
  &#xe6ed;
- 
  调度中心
  &#xe6ee;
- 
  工作导航
  &#xe6db;
- 
  标准化考量
  &#xe6eb;
- 
  综合管理
  &#xe6dd;
- 
  企业管理
  &#xe6e4;
- 
  数据管理
  &#xe6dc;
- 
  实名制管理
  &#xe6de;
- 
  质量安全监管
  &#xe6df;
- 
  施工资料
  &#xe6e0;
- 
  智慧监管
  &#xe6e1;
- 
  工程项目
  &#xe6e2;
- 
  消防验收
  &#xe6e3;
- 
  混凝土监管
  &#xe6e5;
- 
  检测监管
  &#xe6e6;
- 
  通知公告
  &#xe6e7;
- 
  危大工程
  &#xe6e8;
- 
  智慧工地
  &#xe6e9;
- 
  总控平台
  &#xe6ea;
- 
  查看文件
  &#xe6d8;
- 
  删除
  &#xe6d9;
- 
  重新上传
  &#xe6da;
- 
  工程编码
  &#xe6cf;
- 
  工程名称
  &#xe6d0;
- 
  企业名称
  &#xe6d1;
- 
  统一社会信用代码
  &#xe6d2;
- 
  手机号
  &#xe6d3;
- 
  施工许可证
  &#xe6d4;
- 
  工程类型
  &#xe6d5;
- 
  工程状态
  &#xe6d6;
- 
  企业负责人
  &#xe6d7;
- 
  管理员
  &#xe6ce;
- 
  监控调度中心
  &#xe6c1;
- 
  待办事项
  &#xe6c2;
- 
  安全监督
  &#xe6c3;
- 
  监督管理
  &#xe6c4;
- 
  通知公告
  &#xe6c5;
- 
  首页
  &#xe6c6;
- 
  工程项目监管
  &#xe6c7;
- 
  工程验收
  &#xe6c8;
- 
  质量监管
  &#xe6c9;
- 
  决策分析
  &#xe6ca;
- 
  数据交换
  &#xe6cb;
- 
  数据管理
  &#xe6cc;
- 
  文明施工管理
  &#xe6cd;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

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

### 第二步：定义使用 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"。

- 决策分析
  .sh-icon-juecefenxi1
- 附件下载
  .sh-icon-fujianxiazai
- 调度中心
  .sh-icon-tiaoduzhongxin
- 工作导航
  .sh-icon-gongzuodaohang
- 标准化考量
  .sh-icon-biaozhunhuakaoliang
- 综合管理
  .sh-icon-zongheguanli
- 企业管理
  .sh-icon-qiyeguanli
- 数据管理
  .sh-icon-shujuguanli1
- 实名制管理
  .sh-icon-shimingzhiguanli
- 质量安全监管
  .sh-icon-zhilianganquanjianguan
- 施工资料
  .sh-icon-shigongziliao
- 智慧监管
  .sh-icon-zhihuijianguan
- 工程项目
  .sh-icon-gongchengxiangmu
- 消防验收
  .sh-icon-xiaofangyanshou
- 混凝土监管
  .sh-icon-hunningtujianguan
- 检测监管
  .sh-icon-jiancejianguan
- 通知公告
  .sh-icon-tongzhigonggao1
- 危大工程
  .sh-icon-weidagongcheng
- 智慧工地
  .sh-icon-zhihuigongdi
- 总控平台
  .sh-icon-zongkongpingtai
- 查看文件
  .sh-icon-chakanwenjian
- 删除
  .sh-icon-shanchu
- 重新上传
  .sh-icon-zhongxinshangchuan
- 工程编码
  .sh-icon-gongchengbianma
- 工程名称
  .sh-icon-gongchengmingcheng
- 企业名称
  .sh-icon-qiyemingcheng
- 统一社会信用代码
  .sh-icon-tongyishehuixinyongdaima
- 手机号
  .sh-icon-shoujihao
- 施工许可证
  .sh-icon-shigongxukezheng
- 工程类型
  .sh-icon-gongchengleixing
- 工程状态
  .sh-icon-gongchengzhuangtai
- 企业负责人
  .sh-icon-qiyefuzeren
- 管理员
  .sh-icon-guanliyuan
- 监控调度中心
  .sh-icon-jiankongtiaoduzhongxin
- 待办事项
  .sh-icon-daibanshixiang
- 安全监督
  .sh-icon-anquanjiandu
- 监督管理
  .sh-icon-jianduguanli
- 通知公告
  .sh-icon-tongzhigonggao
- 首页
  .sh-icon-shouye
- 工程项目监管
  .sh-icon-gongchengxiangmujianguan
- 工程验收
  .sh-icon-gongchengyanshou
- 质量监管
  .sh-icon-zhiliangjianguan
- 决策分析
  .sh-icon-juecefenxi
- 数据交换
  .sh-icon-shujujiaohuan
- 数据管理
  .sh-icon-shujuguanli
- 文明施工管理
  .sh-icon-wenmingshigongguanli

## font-class 引用

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

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

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

使用步骤如下：

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

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

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

    <span class="iconfont sh-icon-xxx"></span>

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

- 决策分析
  #sh-icon-juecefenxi1
- 附件下载
  #sh-icon-fujianxiazai
- 调度中心
  #sh-icon-tiaoduzhongxin
- 工作导航
  #sh-icon-gongzuodaohang
- 标准化考量
  #sh-icon-biaozhunhuakaoliang
- 综合管理
  #sh-icon-zongheguanli
- 企业管理
  #sh-icon-qiyeguanli
- 数据管理
  #sh-icon-shujuguanli1
- 实名制管理
  #sh-icon-shimingzhiguanli
- 质量安全监管
  #sh-icon-zhilianganquanjianguan
- 施工资料
  #sh-icon-shigongziliao
- 智慧监管
  #sh-icon-zhihuijianguan
- 工程项目
  #sh-icon-gongchengxiangmu
- 消防验收
  #sh-icon-xiaofangyanshou
- 混凝土监管
  #sh-icon-hunningtujianguan
- 检测监管
  #sh-icon-jiancejianguan
- 通知公告
  #sh-icon-tongzhigonggao1
- 危大工程
  #sh-icon-weidagongcheng
- 智慧工地
  #sh-icon-zhihuigongdi
- 总控平台
  #sh-icon-zongkongpingtai
- 查看文件
  #sh-icon-chakanwenjian
- 删除
  #sh-icon-shanchu
- 重新上传
  #sh-icon-zhongxinshangchuan
- 工程编码
  #sh-icon-gongchengbianma
- 工程名称
  #sh-icon-gongchengmingcheng
- 企业名称
  #sh-icon-qiyemingcheng
- 统一社会信用代码
  #sh-icon-tongyishehuixinyongdaima
- 手机号
  #sh-icon-shoujihao
- 施工许可证
  #sh-icon-shigongxukezheng
- 工程类型
  #sh-icon-gongchengleixing
- 工程状态
  #sh-icon-gongchengzhuangtai
- 企业负责人
  #sh-icon-qiyefuzeren
- 管理员
  #sh-icon-guanliyuan
- 监控调度中心
  #sh-icon-jiankongtiaoduzhongxin
- 待办事项
  #sh-icon-daibanshixiang
- 安全监督
  #sh-icon-anquanjiandu
- 监督管理
  #sh-icon-jianduguanli
- 通知公告
  #sh-icon-tongzhigonggao
- 首页
  #sh-icon-shouye
- 工程项目监管
  #sh-icon-gongchengxiangmujianguan
- 工程验收
  #sh-icon-gongchengyanshou
- 质量监管
  #sh-icon-zhiliangjianguan
- 决策分析
  #sh-icon-juecefenxi
- 数据交换
  #sh-icon-shujujiaohuan
- 数据管理
  #sh-icon-shujuguanli
- 文明施工管理
  #sh-icon-wenmingshigongguanli

## 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>