彩色字体

查看项目
  • drop-down
    
  • minimizing
    
  • 关闭
    
  • maximize
    
  • password
    
  • user
    
  • eye_open
    
  • eye
    
  • cloud-export
    
  • cloud-import
    
  • 单选框
    
  • transfer
    
  • 开关
    
  • 多选框
    
  • 评分
    
  • 符号-单行输入框
    
  • 下拉框
    
  • 日期选择
    
  • mtbutton
    
  • icon_时间选择
    
  • 级联选择
    
  • Color
    
  • m-计数器
    
  • 文件上传
    
  • 滑块
    
  • home
    

Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1666245818168') format('woff'),
       url('iconfont.ttf?t=1666245818168') 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"。

  • drop-down
    .icon-xiala
  • minimizing
    .icon-min-size
  • 关闭
    .icon-close
  • maximize
    .icon-maximize
  • password
    .icon-password
  • user
    .icon-user
  • eye_open
    .icon-eye_open
  • eye
    .icon-eye
  • cloud-export
    .icon-cloud-export
  • cloud-import
    .icon-cloud-import
  • 单选框
    .icon-radio
  • transfer
    .icon-transfer
  • 开关
    .icon-switch
  • 多选框
    .icon-checkbox
  • 评分
    .icon-rate
  • 符号-单行输入框
    .icon-input
  • 下拉框
    .icon-select
  • 日期选择
    .icon-date-picker
  • mtbutton
    .icon-button
  • icon_时间选择
    .icon-time-picker
  • 级联选择
    .icon-cascader
  • Color
    .icon-color-picker
  • m-计数器
    .icon-input-number
  • 文件上传
    .icon-upload
  • 滑块
    .icon-slider
  • home
    .icon-home

font-class 引用

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

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

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

使用步骤如下：

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

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

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

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

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

  • drop-down
    #icon-xiala
  • minimizing
    #icon-min-size
  • 关闭
    #icon-close
  • maximize
    #icon-maximize
  • password
    #icon-password
  • user
    #icon-user
  • eye_open
    #icon-eye_open
  • eye
    #icon-eye
  • cloud-export
    #icon-cloud-export
  • cloud-import
    #icon-cloud-import
  • 单选框
    #icon-radio
  • transfer
    #icon-transfer
  • 开关
    #icon-switch
  • 多选框
    #icon-checkbox
  • 评分
    #icon-rate
  • 符号-单行输入框
    #icon-input
  • 下拉框
    #icon-select
  • 日期选择
    #icon-date-picker
  • mtbutton
    #icon-button
  • icon_时间选择
    #icon-time-picker
  • 级联选择
    #icon-cascader
  • Color
    #icon-color-picker
  • m-计数器
    #icon-input-number
  • 文件上传
    #icon-upload
  • 滑块
    #icon-slider
  • home
    #icon-home

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>