• B端数字2
    
  • B端数字1
    
  • B端数字3
    
  • 
  • 
  • 
  • 科室介绍
    
  • 下拉1
    
  • 首页
    
  • 列表
    
  • 统计分析
    
  • 向左
    
  • 好评
    
  • 更多 大
    
  • 药箱
    
  • 好评
    
  • 关闭
    
  • 搜索
    
  • 下拉
    
  • 首页
    
  • 我的
    
  • 药丸
    
  • 设置
    
  • 待就诊
    
  • 日历
    
  • 热度
    
  • 化学
    
  • 倒计时
    
  • 定位
    
  • 下拉2-01
    
  • 失败
    
  • 对勾
    
  • 双箭头(向右)-01
    
  • 上拉2-01 (2)
    
  • 消息
    
  • 向左
    
  • 复选框。
    
  • 复选框 (1)-01
    
  • 下拉箭头
    
  • 实五角星
    
  • 向右
    
  • 向左
    
  • 单选框-选中
    
  • 单选框-未选中
    
  • 排序箭头上
    
  • 排序箭头下
    
  • 排序-上
    
  • 排序-下
    
  • 历史记录
    
  • 说明
    
  • 统计报表
    
  • 床位
    
  • 统计
    
  • 已-配送
    
  • 未-配送
    
  • 数据源总数
    
  • 科室导诊#bl
    
  • 提醒
    
  • 录音
    
  • 下 拉 (1)
    
  • 问好
    
  • 进行中
    
  • 设置
    
  • 星号
    
  • 空白页-暂无漏接诊单
    
  • 增加
    
  • 轨迹起点
    
  • 搜索
    
  • 扫一扫
    
  • 其他
    
  • 输液管理
    
  • 标本留取
    
  • 正常
    
  • 异常
    
  • icon_liucheng
    
  • 陪检(轮椅)图标
    
  • 转移
    
  • 其他
    
  • 注射器
    
  • 药品
    
  • 标本采集
    
  • 二维码
    
  • 超时
    
  • 关 闭
    
  • 铃铛
    
  • 喇叭 (1)
    
  • 喇叭
    
  • 切换
    
  • 对勾
    
  • 实时监控_轮巡
    
  • 重点关注
    
  • 垃圾桶
    
  • 
  • 
  • 1_round_solid_数字1_by_climei
    
  • 2_round_solid_数字2_by_climei
    
  • 3_round_solid_数字3_by_climei
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

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

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

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

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

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

  • B端数字2
    .transport-Bduanshuzi
  • B端数字1
    .transport-Bduanshuzi1
  • B端数字3
    .transport-Bduanshuzi11
  • .transport-zhong1
  • .transport-te1
  • .transport-wei
  • 科室介绍
    .transport-keshijieshao
  • 下拉1
    .transport-xiala1
  • 首页
    .transport-shouye
  • 列表
    .transport-liebiao
  • 统计分析
    .transport-tongjifenxi
  • 向左
    .transport-xiangzuo
  • 好评
    .transport-haoping
  • 更多 大
    .transport-gengduoda
  • 药箱
    .transport-shouye1
  • 好评
    .transport-haoping1
  • 关闭
    .transport-guanbi
  • 搜索
    .transport-sousuo
  • 下拉
    .transport-xiala
  • 首页
    .transport-shouye2
  • 我的
    .transport-shouye3
  • 药丸
    .transport-shouye4
  • 设置
    .transport-shouye5
  • 待就诊
    .transport-shouye6
  • 日历
    .transport-icon
  • 热度
    .transport-icon1
  • 化学
    .transport-icon2
  • 倒计时
    .transport-daojishi
  • 定位
    .transport-shouye7
  • 下拉2-01
    .transport-xiala2-01
  • 失败
    .transport-shibai
  • 对勾
    .transport-duigou
  • 双箭头(向右)-01
    .transport-shuangjiantouxiangyou-
  • 上拉2-01 (2)
    .transport-shangla-
  • 消息
    .transport-xiaoxi
  • 向左
    .transport-xiangzuo1
  • 复选框。
    .transport-fuxuankuang
  • 复选框 (1)-01
    .transport-fuxuankuang-
  • 下拉箭头
    .transport-xialajiantou
  • 实五角星
    .transport-shiwujiaoxing
  • 向右
    .transport-xiangyou
  • 向左
    .transport-xiangzuo2
  • 单选框-选中
    .transport-webicon19
  • 单选框-未选中
    .transport-webicon206
  • 排序箭头上
    .transport-paixujiantoushang
  • 排序箭头下
    .transport-paixujiantouxia
  • 排序-上
    .transport-paixu-shang
  • 排序-下
    .transport-paixu-xia
  • 历史记录
    .transport-shouye8
  • 说明
    .transport-icon3
  • 统计报表
    .transport-tongjibaobiao
  • 床位
    .transport-chuangwei
  • 统计
    .transport-tongji
  • 已-配送
    .transport-yi-peisong
  • 未-配送
    .transport-wei-peisong
  • 数据源总数
    .transport-shujuyuanzongshu
  • 科室导诊#bl
    .transport-keshidaozhen
  • 提醒
    .transport-shouye9
  • 录音
    .transport-luyin
  • 下 拉 (1)
    .transport-xiala2
  • 问好
    .transport-wenhao
  • 进行中
    .transport-shouye10
  • 设置
    .transport-shezhi
  • 星号
    .transport-required
  • 空白页-暂无漏接诊单
    .transport-yunzhuanzhentongjiicon-
  • 增加
    .transport-tag27fuben
  • 轨迹起点
    .transport-qidian
  • 搜索
    .transport-search
  • 扫一扫
    .transport-saoma
  • 其他
    .transport-qita
  • 输液管理
    .transport-shuyeguanli
  • 标本留取
    .transport-yidonghuliicon_biaobenliuqu
  • 正常
    .transport-zhengchang
  • 异常
    .transport-yichang
  • icon_liucheng
    .transport-icon_liucheng
  • 陪检(轮椅)图标
    .transport-peijianlunyitubiao
  • 转移
    .transport-ccgl-kuneizhuanyi-1
  • 其他
    .transport-qita1
  • 注射器
    .transport--
  • 药品
    .transport-yaopin
  • 标本采集
    .transport-biaobencaiji
  • 二维码
    .transport-erweima
  • 超时
    .transport-chaoshi
  • 关 闭
    .transport-guanbi1
  • 铃铛
    .transport-lingdang
  • 喇叭 (1)
    .transport-laba1
  • 喇叭
    .transport-iconfontcrmtubiao68
  • 切换
    .transport-qiehuan
  • 对勾
    .transport-duigou1
  • 实时监控_轮巡
    .transport-shishijiankong_lunxun
  • 重点关注
    .transport-zhongdianguanzhu
  • 垃圾桶
    .transport-lajitong
  • .transport-tubiao_wei
  • .transport-zhong
  • 1_round_solid_数字1_by_climei
    .transport-1_round_solid
  • 2_round_solid_数字2_by_climei
    .transport-2_round_solid
  • 3_round_solid_数字3_by_climei
    .transport-3_round_solid

font-class 引用


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

与 Unicode 使用方式相比,具有如下特点:

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

使用步骤如下:

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

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

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

<span class="icon_transport transport-xxx"></span>

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

  • B端数字2
    #transport-Bduanshuzi
  • B端数字1
    #transport-Bduanshuzi1
  • B端数字3
    #transport-Bduanshuzi11
  • #transport-zhong1
  • #transport-te1
  • #transport-wei
  • 科室介绍
    #transport-keshijieshao
  • 下拉1
    #transport-xiala1
  • 首页
    #transport-shouye
  • 列表
    #transport-liebiao
  • 统计分析
    #transport-tongjifenxi
  • 向左
    #transport-xiangzuo
  • 好评
    #transport-haoping
  • 更多 大
    #transport-gengduoda
  • 药箱
    #transport-shouye1
  • 好评
    #transport-haoping1
  • 关闭
    #transport-guanbi
  • 搜索
    #transport-sousuo
  • 下拉
    #transport-xiala
  • 首页
    #transport-shouye2
  • 我的
    #transport-shouye3
  • 药丸
    #transport-shouye4
  • 设置
    #transport-shouye5
  • 待就诊
    #transport-shouye6
  • 日历
    #transport-icon
  • 热度
    #transport-icon1
  • 化学
    #transport-icon2
  • 倒计时
    #transport-daojishi
  • 定位
    #transport-shouye7
  • 下拉2-01
    #transport-xiala2-01
  • 失败
    #transport-shibai
  • 对勾
    #transport-duigou
  • 双箭头(向右)-01
    #transport-shuangjiantouxiangyou-
  • 上拉2-01 (2)
    #transport-shangla-
  • 消息
    #transport-xiaoxi
  • 向左
    #transport-xiangzuo1
  • 复选框。
    #transport-fuxuankuang
  • 复选框 (1)-01
    #transport-fuxuankuang-
  • 下拉箭头
    #transport-xialajiantou
  • 实五角星
    #transport-shiwujiaoxing
  • 向右
    #transport-xiangyou
  • 向左
    #transport-xiangzuo2
  • 单选框-选中
    #transport-webicon19
  • 单选框-未选中
    #transport-webicon206
  • 排序箭头上
    #transport-paixujiantoushang
  • 排序箭头下
    #transport-paixujiantouxia
  • 排序-上
    #transport-paixu-shang
  • 排序-下
    #transport-paixu-xia
  • 历史记录
    #transport-shouye8
  • 说明
    #transport-icon3
  • 统计报表
    #transport-tongjibaobiao
  • 床位
    #transport-chuangwei
  • 统计
    #transport-tongji
  • 已-配送
    #transport-yi-peisong
  • 未-配送
    #transport-wei-peisong
  • 数据源总数
    #transport-shujuyuanzongshu
  • 科室导诊#bl
    #transport-keshidaozhen
  • 提醒
    #transport-shouye9
  • 录音
    #transport-luyin
  • 下 拉 (1)
    #transport-xiala2
  • 问好
    #transport-wenhao
  • 进行中
    #transport-shouye10
  • 设置
    #transport-shezhi
  • 星号
    #transport-required
  • 空白页-暂无漏接诊单
    #transport-yunzhuanzhentongjiicon-
  • 增加
    #transport-tag27fuben
  • 轨迹起点
    #transport-qidian
  • 搜索
    #transport-search
  • 扫一扫
    #transport-saoma
  • 其他
    #transport-qita
  • 输液管理
    #transport-shuyeguanli
  • 标本留取
    #transport-yidonghuliicon_biaobenliuqu
  • 正常
    #transport-zhengchang
  • 异常
    #transport-yichang
  • icon_liucheng
    #transport-icon_liucheng
  • 陪检(轮椅)图标
    #transport-peijianlunyitubiao
  • 转移
    #transport-ccgl-kuneizhuanyi-1
  • 其他
    #transport-qita1
  • 注射器
    #transport--
  • 药品
    #transport-yaopin
  • 标本采集
    #transport-biaobencaiji
  • 二维码
    #transport-erweima
  • 超时
    #transport-chaoshi
  • 关 闭
    #transport-guanbi1
  • 铃铛
    #transport-lingdang
  • 喇叭 (1)
    #transport-laba1
  • 喇叭
    #transport-iconfontcrmtubiao68
  • 切换
    #transport-qiehuan
  • 对勾
    #transport-duigou1
  • 实时监控_轮巡
    #transport-shishijiankong_lunxun
  • 重点关注
    #transport-zhongdianguanzhu
  • 垃圾桶
    #transport-lajitong
  • #transport-tubiao_wei
  • #transport-zhong
  • 1_round_solid_数字1_by_climei
    #transport-1_round_solid
  • 2_round_solid_数字2_by_climei
    #transport-2_round_solid
  • 3_round_solid_数字3_by_climei
    #transport-3_round_solid

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>