• 密钥
    
  • 筛选
    
  • 科室介绍
    
  • 下拉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
    
  • 
  • 
  • 
  • B端数字2
    
  • B端数字1
    
  • B端数字3
    
  • 
  • 单箭头,长箭头,右
    
  • 搜索
    
  • 统计6
    
  • 列表
    
  • icon_zhengzaijinx
    
  • xiala02
    
  • 扫一扫
    
  • 医废管理
    
  • 头像
    
  • 箭头上
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

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

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

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

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

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

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

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="newicon newicon-xxx"></span>

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

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

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>