• 返回
    
  • top2
    
  • top1
    
  • top1-copy
    
  • top3-copy
    
  • top1-copy
    
  • top2-copy
    
  • top3-copy
    
  • 统计_面性
    
  • 箭头_左右切换
    
  • 更多
    
  • 角标
    
  • 下箭头
    
  • 护士
    
  • 向右
    
  • 药品数据
    
  • 标本信息
    
  • 报修
    
  • 目录
    
  • 护士执行护理工作
    
  • 配置
    
  • 筛选
    
  • home_title_class
    
  • 调度-fill
    
  • 护士
    
  • 下载
    
  • 图例
    
  • 身体
    
  • iconPark-shopping-cart-add Copy
    
  • 标本
    
  • 添加
    
  • 条形码
    
  • 图片
    
  • 示闲
    
  • 示忙
    
  • 语音播放
    
  • 来电
    
  • 通话中
    
  • 配送成功
    
  • 星号
    
  • 第三方
    
  • 事件配置
    
  • 失败 (1)
    
  • 快速报修
    
  • bg-question
    
  • 关闭
    
  • 关闭
    
  • Icon - 统计分析
    
  • 资产
    
  • 控制
    
  • 建单统计
    
  • 配置中心
    
  • 24gf-tags
    
  • 修改
    
  • 删除
    
  • 输液
    
  • 输液
    
  • 巡检
    
  • 订单—列表
    
  • 日历
    
  • 科室介绍
    
  • 下拉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
    
  • 列表
    
  • xiala02
    
  • 扫一扫
    
  • 医废管理
    
  • 头像
    
  • 箭头上
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 返回
    .transport-fanhui
  • top2
    .transport-top1
  • top1
    .transport-top2
  • top1-copy
    .transport-top31
  • top3-copy
    .transport-top5
  • top1-copy
    .transport-top4
  • top2-copy
    .transport-top3
  • top3-copy
    .transport-top
  • 统计_面性
    .transport-tongji-2
  • 箭头_左右切换
    .transport-jiantou_zuoyouqiehuan
  • 更多
    .transport-gengduo
  • 角标
    .transport-jiaobiao
  • 下箭头
    .transport-xiajiantou
  • 护士
    .transport-hushi1
  • 向右
    .transport-xiangyou1
  • 药品数据
    .transport-yaopinshuju
  • 标本信息
    .transport-biaobenxinxi
  • 报修
    .transport-baoxiu
  • 目录
    .transport-RectangleCopy
  • 护士执行护理工作
    .transport-hushizhihanghuligongzuo
  • 配置
    .transport-peizhi1
  • 筛选
    .transport-shaixuan
  • home_title_class
    .transport-shangban
  • 调度-fill
    .transport-tiaodu-fill
  • 护士
    .transport-hushi
  • 下载
    .transport-xiazai
  • 图例
    .transport-tuli
  • 身体
    .transport-shenti
  • iconPark-shopping-cart-add Copy
    .transport-a-iconPark-shopping-cart-addCopy
  • 标本
    .transport-icon_biaoben
  • 添加
    .transport-tianjia
  • 条形码
    .transport-bar-code
  • 图片
    .transport-a-11111
  • 示闲
    .transport-shixian
  • 示忙
    .transport-shimang1
  • 语音播放
    .transport-yuyinbofang
  • 来电
    .transport-laidian
  • 通话中
    .transport-tonghuazhong
  • 配送成功
    .transport-peisongchenggong
  • 星号
    .transport-required
  • 第三方
    .transport-disanfang
  • 事件配置
    .transport-shijianpeizhi5
  • 失败 (1)
    .transport-shibai1
  • 快速报修
    .transport-kuaisubaoxiu
  • bg-question
    .transport-bg-question
  • 关闭
    .transport-guanbi2
  • 关闭
    .transport-guanbi3
  • Icon - 统计分析
    .transport-Icon-tongjifenxi
  • 资产
    .transport-zichan
  • 控制
    .transport-kongzhi
  • 建单统计
    .transport-jiandantongji
  • 配置中心
    .transport-peizhizhongxin
  • 24gf-tags
    .transport-24gf-tags
  • 修改
    .transport-weibiaoti2010104
  • 删除
    .transport-shanchu1
  • 输液
    .transport-shuye
  • 输液
    .transport-shuye1
  • 巡检
    .transport-xunjian
  • 订单—列表
    .transport-dingdanliebiao
  • 日历
    .transport-rili
  • 科室介绍
    .transport-keshijieshao
  • 下拉1
    .transport-xiala11
  • 首页
    .transport-shouye
  • 列表
    .transport-liebiao1
  • 统计分析
    .transport-tongjifenxi
  • 向左
    .transport-xiangzuo
  • 好评
    .transport-haoping
  • 更多 大
    .transport-gengduoda
  • 药箱
    .transport-shouye1
  • 好评
    .transport-haoping1
  • 关闭
    .transport-guanbi
  • 下拉
    .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-yunzhuanzhentongjiicon-
  • 增加
    .transport-tag27fuben
  • 轨迹起点
    .transport-qidian
  • 搜索
    .transport-search
  • 其他
    .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
  • .transport-zhong1
  • .transport-te1
  • .transport-wei
  • B端数字2
    .transport-Bduanshuzi
  • B端数字1
    .transport-Bduanshuzi1
  • B端数字3
    .transport-Bduanshuzi11
  • .transport-zu1468
  • 单箭头,长箭头,右
    .transport-arrow-right-full
  • 更多
    .transport-gengduoda-copy
  • 搜索
    .transport-sousuo
  • 统计6
    .transport-tongji6
  • 列表
    .transport-liebiao
  • xiala02
    .transport-xiala1
  • 扫一扫
    .transport-saoma
  • 医废管理
    .transport-yifeiguanli
  • 头像
    .transport-a-ziyuan7
  • 箭头上
    .transport-a-ziyuan3

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"。

  • 返回
    #transport-fanhui
  • top2
    #transport-top1
  • top1
    #transport-top2
  • top1-copy
    #transport-top31
  • top3-copy
    #transport-top5
  • top1-copy
    #transport-top4
  • top2-copy
    #transport-top3
  • top3-copy
    #transport-top
  • 统计_面性
    #transport-tongji-2
  • 箭头_左右切换
    #transport-jiantou_zuoyouqiehuan
  • 更多
    #transport-gengduo
  • 角标
    #transport-jiaobiao
  • 下箭头
    #transport-xiajiantou
  • 护士
    #transport-hushi1
  • 向右
    #transport-xiangyou1
  • 药品数据
    #transport-yaopinshuju
  • 标本信息
    #transport-biaobenxinxi
  • 报修
    #transport-baoxiu
  • 目录
    #transport-RectangleCopy
  • 护士执行护理工作
    #transport-hushizhihanghuligongzuo
  • 配置
    #transport-peizhi1
  • 筛选
    #transport-shaixuan
  • home_title_class
    #transport-shangban
  • 调度-fill
    #transport-tiaodu-fill
  • 护士
    #transport-hushi
  • 下载
    #transport-xiazai
  • 图例
    #transport-tuli
  • 身体
    #transport-shenti
  • iconPark-shopping-cart-add Copy
    #transport-a-iconPark-shopping-cart-addCopy
  • 标本
    #transport-icon_biaoben
  • 添加
    #transport-tianjia
  • 条形码
    #transport-bar-code
  • 图片
    #transport-a-11111
  • 示闲
    #transport-shixian
  • 示忙
    #transport-shimang1
  • 语音播放
    #transport-yuyinbofang
  • 来电
    #transport-laidian
  • 通话中
    #transport-tonghuazhong
  • 配送成功
    #transport-peisongchenggong
  • 星号
    #transport-required
  • 第三方
    #transport-disanfang
  • 事件配置
    #transport-shijianpeizhi5
  • 失败 (1)
    #transport-shibai1
  • 快速报修
    #transport-kuaisubaoxiu
  • bg-question
    #transport-bg-question
  • 关闭
    #transport-guanbi2
  • 关闭
    #transport-guanbi3
  • Icon - 统计分析
    #transport-Icon-tongjifenxi
  • 资产
    #transport-zichan
  • 控制
    #transport-kongzhi
  • 建单统计
    #transport-jiandantongji
  • 配置中心
    #transport-peizhizhongxin
  • 24gf-tags
    #transport-24gf-tags
  • 修改
    #transport-weibiaoti2010104
  • 删除
    #transport-shanchu1
  • 输液
    #transport-shuye
  • 输液
    #transport-shuye1
  • 巡检
    #transport-xunjian
  • 订单—列表
    #transport-dingdanliebiao
  • 日历
    #transport-rili
  • 科室介绍
    #transport-keshijieshao
  • 下拉1
    #transport-xiala11
  • 首页
    #transport-shouye
  • 列表
    #transport-liebiao1
  • 统计分析
    #transport-tongjifenxi
  • 向左
    #transport-xiangzuo
  • 好评
    #transport-haoping
  • 更多 大
    #transport-gengduoda
  • 药箱
    #transport-shouye1
  • 好评
    #transport-haoping1
  • 关闭
    #transport-guanbi
  • 下拉
    #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-yunzhuanzhentongjiicon-
  • 增加
    #transport-tag27fuben
  • 轨迹起点
    #transport-qidian
  • 搜索
    #transport-search
  • 其他
    #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
  • #transport-zhong1
  • #transport-te1
  • #transport-wei
  • B端数字2
    #transport-Bduanshuzi
  • B端数字1
    #transport-Bduanshuzi1
  • B端数字3
    #transport-Bduanshuzi11
  • #transport-zu1468
  • 单箭头,长箭头,右
    #transport-arrow-right-full
  • 更多
    #transport-gengduoda-copy
  • 搜索
    #transport-sousuo
  • 统计6
    #transport-tongji6
  • 列表
    #transport-liebiao
  • xiala02
    #transport-xiala1
  • 扫一扫
    #transport-saoma
  • 医废管理
    #transport-yifeiguanli
  • 头像
    #transport-a-ziyuan7
  • 箭头上
    #transport-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>