#

- 
  minio
  &#xe63c;
- 
  麒麟
  &#xe62f;
- 
  用户管理
  &#xe615;
- 
  系统设置
  &#xe60a;
- 
  系统日志
  &#xe613;
- 
  网络
  &#xe6d9;
- 
  拼图
  &#xe611;
- 
  盾牌
  &#xe60b;
- 
  car dashboard
  &#xe63a;
- 
  k8s-namespace
  &#xe7bb;
- 
  k8s
  &#xe62d;
- 
  configuration
  &#xe78b;
- 
  钟表
  &#xe663;
- 
  storage
  &#xe6c5;
- 
  服务器
  &#xe7cd;
- 
  工作负载
  &#xe639;
- 
  授权
  &#xe609;
- 
  lock h5
  &#xe610;
- 
  更改密码
  &#xe60f;
- 
  关于
  &#xe65f;
- 
  项目管理
  &#xe624;
- 
  传输_上传
  &#xe608;
- 
  Star Star
  &#xe635;
- 
  华为
  &#xe607;
- 
  openstack
  &#xe632;
- 
  VMware Vsphere对接数据源
  &#xe61a;
- 
  SFTP
  &#xe647;
- 
  Amazon S3上传
  &#xe8e4;
- 
  讨论
  &#xe602;
- 
  bug
  &#xe616;
- 
  Logo GitHub
  &#xe67c;
- 
  Azure
  &#xe600;
- 
  oss
  &#xe605;
- 
  ping
  &#xe650;
- 
  使用中
  &#xe629;
- 
  错误
  &#xe60d;
- 
  错误
  &#xed19;
- 
  集群
  &#xe601;
- 
  禁用
  &#xe60c;
- 
  帮 助
  &#xe656;
- 
  帮 助
  &#xe612;
- 
  帮助
  &#xe637;
- 
  帮 助
  &#xe61c;
- 
  对号
  &#xe606;
- 
  警告
  &#xe65c;
- 
  fold
  &#xe638;
- 
  fold
  &#xed18;
- 
  x
  &#xe64f;
- 
  自动
  &#xe633;
- 
  主机
  &#xe62c;
- 
  自动
  &#xe666;
- 
  版本
  &#xe71f;
- 
  备份_复制
  &#xe674;
- 
  项目管理
  &#xe628;
- 
  EulerOS
  &#xe6bc;
- 
  未读
  &#xe634;
- 
  已读
  &#xe62e;
- 
  企业微信
  &#xe60e;
- 
  钉钉
  &#xe662;
- 
  钉钉
  &#xe645;
- 
  企业微信
  &#xe614;
- 
  NVIDIA-Logo
  &#xe657;
- 
  ubuntu
  &#xe6d3;
- 
  red-hat
  &#xe6d8;
- 
  Centos
  &#xe603;
- 
  nvidia
  &#xe62b;
- 
  nvidia
  &#xe604;
- 
  导入
  &#xe6bf;
- 
  窗口
  &#xe664;
- 
  编辑
  &#xe6ab;
- 
  删 除
  &#xe696;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

    @font-face {
      font-family: 'iconfont';
      src: url('iconfont.woff2?t=1645771361128') format('woff2'),
           url('iconfont.woff?t=1645771361128') format('woff'),
           url('iconfont.ttf?t=1645771361128') 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"。

- minio
  .iconminio
- 麒麟
  .iconqilin
- 用户管理
  .iconyonghuguanli
- 系统设置
  .iconxitongshezhi
- 系统日志
  .iconxitongrizhi
- 网络
  .iconnetwork
- 拼图
  .iconcustom
- 盾牌
  .iconaccesscontrol
- car dashboard
  .icondashboard
- k8s-namespace
  .iconnamesapce
- k8s
  .iconkubernets
- configuration
  .iconconfiguration
- 钟表
  .iconevent
- storage
  .iconstorage
- 服务器
  .iconnode
- 工作负载
  .iconworkload
- 授权
  .iconauthorization
- lock h5
  .iconlock
- 更改密码
  .icongenggaimima
- 关于
  .iconguanyu
- 项目管理
  .iconprojectmanage
- 传输_上传
  .iconshangchuan5
- Star Star
  .iconStarStar
- 华为
  .iconhuawei
- openstack
  .iconopenstack
- VMware Vsphere对接数据源
  .iconvmware
- SFTP
  .iconSFTP
- Amazon S3上传
  .icons3
- 讨论
  .icontaolun
- bug
  .iconbug
- Logo GitHub
  .iconhuaban88
- Azure
  .iconAzure
- oss
  .iconoss
- ping
  .iconping
- 使用中
  .iconin-use
- 错误
  .iconerror
- 错误
  .iconerror2
- 集群
  .iconcluster
- 禁用
  .icondiable
- 帮 助
  .iconbangzhu2
- 帮 助
  .iconbangzhu3
- 帮助
  .iconbangzhu
- 帮 助
  .iconbangzhu1
- 对号
  .iconduihao
- 警告
  .iconjinggao
- fold
  .iconfold
- fold
  .iconunfold
- x
  .iconx-pack
- 自动
  .iconautomatic
- 主机
  .iconhost
- 自动
  .iconautomatic-old
- 版本
  .iconmanifest
- 备份_复制
  .iconbackup
- 项目管理
  .iconproject
- EulerOS
  .iconEulerOS
- 未读
  .iconweidu1
- 已读
  .iconyidu1
- 企业微信
  .iconqiyeweixin
- 钉钉
  .icondingding
- 钉钉
  .icondingding1
- 企业微信
  .iconicon-wechat-qy
- NVIDIA-Logo
  .iconNVIDIA-Logo
- ubuntu
  .iconubuntu
- red-hat
  .iconred-hat
- Centos
  .iconziyuan
- nvidia
  .iconnvidia
- nvidia
  .iconnvidia1
- 导入
  .icondaoru6
- 窗口
  .iconchuangkou
- 编辑
  .iconbianji1
- 删 除
  .iconshanchu1

## font-class 引用

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

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

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

使用步骤如下：

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

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

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

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

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

- minio
  #iconminio
- 麒麟
  #iconqilin
- 用户管理
  #iconyonghuguanli
- 系统设置
  #iconxitongshezhi
- 系统日志
  #iconxitongrizhi
- 网络
  #iconnetwork
- 拼图
  #iconcustom
- 盾牌
  #iconaccesscontrol
- car dashboard
  #icondashboard
- k8s-namespace
  #iconnamesapce
- k8s
  #iconkubernets
- configuration
  #iconconfiguration
- 钟表
  #iconevent
- storage
  #iconstorage
- 服务器
  #iconnode
- 工作负载
  #iconworkload
- 授权
  #iconauthorization
- lock h5
  #iconlock
- 更改密码
  #icongenggaimima
- 关于
  #iconguanyu
- 项目管理
  #iconprojectmanage
- 传输_上传
  #iconshangchuan5
- Star Star
  #iconStarStar
- 华为
  #iconhuawei
- openstack
  #iconopenstack
- VMware Vsphere对接数据源
  #iconvmware
- SFTP
  #iconSFTP
- Amazon S3上传
  #icons3
- 讨论
  #icontaolun
- bug
  #iconbug
- Logo GitHub
  #iconhuaban88
- Azure
  #iconAzure
- oss
  #iconoss
- ping
  #iconping
- 使用中
  #iconin-use
- 错误
  #iconerror
- 错误
  #iconerror2
- 集群
  #iconcluster
- 禁用
  #icondiable
- 帮 助
  #iconbangzhu2
- 帮 助
  #iconbangzhu3
- 帮助
  #iconbangzhu
- 帮 助
  #iconbangzhu1
- 对号
  #iconduihao
- 警告
  #iconjinggao
- fold
  #iconfold
- fold
  #iconunfold
- x
  #iconx-pack
- 自动
  #iconautomatic
- 主机
  #iconhost
- 自动
  #iconautomatic-old
- 版本
  #iconmanifest
- 备份_复制
  #iconbackup
- 项目管理
  #iconproject
- EulerOS
  #iconEulerOS
- 未读
  #iconweidu1
- 已读
  #iconyidu1
- 企业微信
  #iconqiyeweixin
- 钉钉
  #icondingding
- 钉钉
  #icondingding1
- 企业微信
  #iconicon-wechat-qy
- NVIDIA-Logo
  #iconNVIDIA-Logo
- ubuntu
  #iconubuntu
- red-hat
  #iconred-hat
- Centos
  #iconziyuan
- nvidia
  #iconnvidia
- nvidia
  #iconnvidia1
- 导入
  #icondaoru6
- 窗口
  #iconchuangkou
- 编辑
  #iconbianji1
- 删 除
  #iconshanchu1

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