

Unicode
Font class
Symbol

查看项目


禁用



JPG @3x



PNG @3x



下架白色@3x



上架白色@3x



全选（白色）@3x



产品层级当前@3x



个性设置（白色）@3x



保存（白色）@3x



上传照片默认@3x



列表搜索@3x



向右展开工具（灰色）@3x



向左折回工具（灰色）@3x



取消（灰色）@3x



变更@3x



启用（白色）@3x



商品管理非当前@3x



客户信息非当前@3x



客户物料当前@3x



列表授权白色@3x



客户组织当前@3x



导入（白色）@3x



对象授权白色@3x



导出（白色）@3x



弹窗删除（灰色）@3x



数据权限（非当前）@3x



折叠菜单（右）展开状态用@3x



新增（蓝色）@3x



折叠菜单（左）收起状态用@3x



日历选择双右@3x



日历选择单右@3x



日历选择单左@3x



更多@3x



新增（白色）@3x



日历选择双左@3x



日志（白色）@3x



更换组织白色@3x



替换对接职位白色@3x



清空@3x



删除（白色）@3x



物料管理非当前@3x



用户管理（非当前）@3x



禁止（白色）@3x



确定（白色）@3x



移除白色@3x



终端信息当前@3x



组织管理（非当前）@3x



编辑白色@3x



职位添加@3x



翻页器后@3x



职位级别（当前）@3x



角色管理（非当前）@3x



输入框下拉（单箭头）@3x



选择负责任（白色）@3x



翻页器下选择@3x



解除关联白色@3x



顶部栏信息图标@3x



重置（灰色）@3x



翻页器前@3x



Unicode 引用

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

兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下：

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

@font-face {
  font-family: 'crm-icon-font';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#crm-icon-font') format('svg');
}

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

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

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

<span class="crm-icon-font">&#x33;</span>

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

禁用

.icon-crm-disable
JPG @3x

.icon-crm-jpg
PNG @3x

.icon-crm-png
下架白色@3x

.icon-crm-undercarriage
上架白色@3x

.icon-crm-grounding
全选（白色）@3x

.icon-crm-all-select
产品层级当前@3x

.icon-crm-product-level
个性设置（白色）@3x

.icon-crm-person-setting
保存（白色）@3x

.icon-crm-file-save
上传照片默认@3x

.icon-crm-upload
列表搜索@3x

.icon-crm-search
向右展开工具（灰色）@3x

.icon-crm-unwind-right
向左折回工具（灰色）@3x

.icon-crm-unwind-left
取消（灰色）@3x

.icon-crm-cancel
变更@3x

.icon-crm-change
启用（白色）@3x

.icon-crm-enable
商品管理非当前@3x

.icon-crm-product-manage
客户信息非当前@3x

.icon-crm-customer-info
客户物料当前@3x

.icon-crm-customer-material
列表授权白色@3x

.icon-crm-list-auth
客户组织当前@3x

.icon-crm-customer-org
导入（白色）@3x

.icon-crm-import
对象授权白色@3x

.icon-crm-object-auth
导出（白色）@3x

.icon-crm-export
弹窗删除（灰色）@3x

.icon-crm-delete
数据权限（非当前）@3x

.icon-crm-data-permissions
折叠菜单（右）展开状态用@3x

.icon-crm-menu-open
新增（蓝色）@3x

.icon-crm-add
折叠菜单（左）收起状态用@3x

.icon-crm-menu-close
日历选择双右@3x

.icon-crm-arrow-double-right
日历选择单右@3x

.icon-crm-arrow-small-right
日历选择单左@3x

.icon-crm-arrow-small-left
更多@3x

.icon-crm-more
新增（白色）@3x

.icon-crm-unlock
日历选择双左@3x

.icon-crm-arrow-double-left
日志（白色）@3x

.icon-crm-log
更换组织白色@3x

.icon-crm-customer-change
替换对接职位白色@3x

.icon-crm-customer-replace
清空@3x

.icon-crm-empty
删除（白色）@3x

.icon-crm-trash
物料管理非当前@3x

.icon-crm-material-manage
用户管理（非当前）@3x

.icon-crm-customer-setting
禁止（白色）@3x

.icon-crm-ban
确定（白色）@3x

.icon-crm-ensure
移除白色@3x

.icon-crm-remove
终端信息当前@3x

.icon-crm-terminal-info
组织管理（非当前）@3x

.icon-crm-org-manage
编辑白色@3x

.icon-crm-edit
职位添加@3x

.icon-crm-add-circle
翻页器后@3x

.icon-crm-arrow-right
职位级别（当前）@3x

.icon-crm-position-level
角色管理（非当前）@3x

.icon-crm-role-manage
输入框下拉（单箭头）@3x

.icon-crm-down-input
选择负责任（白色）@3x

.icon-crm-customer-add
翻页器下选择@3x

.icon-crm-arrow-down
解除关联白色@3x

.icon-crm-unlink
顶部栏信息图标@3x

.icon-crm-message
重置（灰色）@3x

.icon-crm-reset
翻页器前@3x

.icon-crm-arrow-left

font-class 引用

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

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

兼容性良好，支持 IE8+，及所有现代浏览器。
相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

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

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

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

<span class="crm-icon-font icon-crm-xxx"></span>

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

禁用

#icon-crm-disable
JPG @3x

#icon-crm-jpg
PNG @3x

#icon-crm-png
下架白色@3x

#icon-crm-undercarriage
上架白色@3x

#icon-crm-grounding
全选（白色）@3x

#icon-crm-all-select
产品层级当前@3x

#icon-crm-product-level
个性设置（白色）@3x

#icon-crm-person-setting
保存（白色）@3x

#icon-crm-file-save
上传照片默认@3x

#icon-crm-upload
列表搜索@3x

#icon-crm-search
向右展开工具（灰色）@3x

#icon-crm-unwind-right
向左折回工具（灰色）@3x

#icon-crm-unwind-left
取消（灰色）@3x

#icon-crm-cancel
变更@3x

#icon-crm-change
启用（白色）@3x

#icon-crm-enable
商品管理非当前@3x

#icon-crm-product-manage
客户信息非当前@3x

#icon-crm-customer-info
客户物料当前@3x

#icon-crm-customer-material
列表授权白色@3x

#icon-crm-list-auth
客户组织当前@3x

#icon-crm-customer-org
导入（白色）@3x

#icon-crm-import
对象授权白色@3x

#icon-crm-object-auth
导出（白色）@3x

#icon-crm-export
弹窗删除（灰色）@3x

#icon-crm-delete
数据权限（非当前）@3x

#icon-crm-data-permissions
折叠菜单（右）展开状态用@3x

#icon-crm-menu-open
新增（蓝色）@3x

#icon-crm-add
折叠菜单（左）收起状态用@3x

#icon-crm-menu-close
日历选择双右@3x

#icon-crm-arrow-double-right
日历选择单右@3x

#icon-crm-arrow-small-right
日历选择单左@3x

#icon-crm-arrow-small-left
更多@3x

#icon-crm-more
新增（白色）@3x

#icon-crm-unlock
日历选择双左@3x

#icon-crm-arrow-double-left
日志（白色）@3x

#icon-crm-log
更换组织白色@3x

#icon-crm-customer-change
替换对接职位白色@3x

#icon-crm-customer-replace
清空@3x

#icon-crm-empty
删除（白色）@3x

#icon-crm-trash
物料管理非当前@3x

#icon-crm-material-manage
用户管理（非当前）@3x

#icon-crm-customer-setting
禁止（白色）@3x

#icon-crm-ban
确定（白色）@3x

#icon-crm-ensure
移除白色@3x

#icon-crm-remove
终端信息当前@3x

#icon-crm-terminal-info
组织管理（非当前）@3x

#icon-crm-org-manage
编辑白色@3x

#icon-crm-edit
职位添加@3x

#icon-crm-add-circle
翻页器后@3x

#icon-crm-arrow-right
职位级别（当前）@3x

#icon-crm-position-level
角色管理（非当前）@3x

#icon-crm-role-manage
输入框下拉（单箭头）@3x

#icon-crm-down-input
选择负责任（白色）@3x

#icon-crm-customer-add
翻页器下选择@3x

#icon-crm-arrow-down
解除关联白色@3x

#icon-crm-unlink
顶部栏信息图标@3x

#icon-crm-message
重置（灰色）@3x

#icon-crm-reset
翻页器前@3x

#icon-crm-arrow-left

Symbol 引用

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

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