• 防护服
    
  • 护目镜
    
  • 预警
    
  • 滴管
    
  • 棉签
    
  • 体检表
    
  • 磁共振
    
  • 危险
    
  • 签字
    
  • 残疾人
    
  • 孕妇
    
  • 测试
    
  • 头颅
    
  • 中医
    
  • 艾滋病
    
  • 病例
    
  • 倒计时
    
  • 时间
    
  • 通知
    
  • 消毒液
    
  • 实验
    
  • 皮肤
    
  • 营养科
    
  • 免疫
    
  • A型血
    
  • B型血
    
  • O型血
    
  • AB型血
    
  • Rh型血
    
  • 血糖
    
  • 高血糖
    
  • 低血糖
    
  • 烧瓶
    
  • 烧杯
    
  • 住院
    
  • 出院
    
  • ICU病房
    
  • 美容科
    
  • 保健
    
  • 臀部
    
  • 西药
    
  • 安全
    
  • 定位
    
  • 视力表
    
  • 好评
    
  • 中评
    
  • 差评
    
  • 标签
    
  • 预约
    
  • 就诊
    
  • 导航
    
  • 资讯
    
  • 反馈
    
  • 计算器
    
  • 下载
    
  • 上传
    
  • 输血
    
  • 讲坛
    
  • 氧气罐
    
  • 急救电话
    
  • 药膏
    
  • 基因
    
  • 邮件
    
  • 老人
    
  • 付款
    
  • 放射科
    
  • 细胞
    
  • CT
    
  • 切换
    
  • 避孕套
    
  • 骨折
    
  • 近视
    
  • 日期
    
  • 消息
    
  • 增加
    
  • 减少
    
  • 删除
    
  • 保鲜箱
    
  • 团体
    
  • 图片
    
  • 验孕棒
    
  • 男性
    
  • 女性
    
  • 脑科
    
  • 
  • 赞2
    
  • 
  • 圆形未选中
    
  • 圆形选中-fill
    
  • 图片
    
  • 医院
    
  • 病房
    
  • 医生
    
  • 护士
    
  • 听诊器
    
  • 输液
    
  • 手术刀
    
  • 药箱
    
  • 显微镜
    
  • 温度计
    
  • 体温抢
    
  • 药瓶
    
  • 血袋
    
  • 注射器
    
  • 电话
    
  • 红十字
    
  • 试管
    
  • 手术剪
    
  • 测体重
    
  • 测身高
    
  • 心电图
    
  • X光
    
  • B超
    
  • DNA
    
  • 病毒
    
  • 死亡
    
  • 病例单
    
  • 细菌
    
  • 文件夹
    
  • 药丸
    
  • 创可贴
    
  • 药片
    
  • 药剂
    
  • 中药
    
  • 日历
    
  • 脑科
    
  • 神经科
    
  • 耳科
    
  • 眼科
    
  • 鼻科
    
  • 牙科
    
  • 胸部
    
  • 腰部
    
  • 生殖科
    
  • 男科
    
  • 妇科
    
  • 儿科
    
  • 手部
    
  • 脚部
    
  • 咽喉科
    
  • 心脏
    
  • 肝脏
    
  • 
  • 
  • 
  • 肠道
    
  • 癌细胞
    
  • 疫苗
    
  • 骨科
    
  • 心率
    
  • 睡眠
    
  • 医典
    
  • 笔记
    
  • 健康码
    
  • 扫描
    
  • 扫描
    
  • 条形码
    
  • 二维码
    
  • 指纹
    
  • 客服
    
  • 挂号
    
  • 血型
    
  • 药房
    
  • 医保
    
  • 医保卡
    
  • 救护车
    
  • 救护机
    
  • 病床
    
  • 担架车
    
  • 担架
    
  • 拐杖
    
  • 轮椅
    
  • 康复架
    
  • 口罩
    
  • 手套
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 防护服
    .icon-fanghufu
  • 护目镜
    .icon-humujing
  • 预警
    .icon-yujing
  • 滴管
    .icon-diguan
  • 棉签
    .icon-mianqian
  • 体检表
    .icon-tijianbiao
  • 磁共振
    .icon-cigongzhen
  • 危险
    .icon-weixian
  • 签字
    .icon-qianzi
  • 残疾人
    .icon-canjiren
  • 孕妇
    .icon-yunfu
  • 测试
    .icon-ceshi
  • 头颅
    .icon-toulu
  • 中医
    .icon-zhongyi
  • 艾滋病
    .icon-aizibing
  • 病例
    .icon-bingli
  • 倒计时
    .icon-daojishi
  • 时间
    .icon-shijian
  • 通知
    .icon-tongzhi
  • 消毒液
    .icon-xiaoduye
  • 实验
    .icon-shiyan
  • 皮肤
    .icon-pifu
  • 营养科
    .icon-yingyangke
  • 免疫
    .icon-mianyi
  • A型血
    .icon-Axingxie
  • B型血
    .icon-Bxingxie
  • O型血
    .icon-Oxingxie
  • AB型血
    .icon-ABxingxie
  • Rh型血
    .icon-Rhxingxie
  • 血糖
    .icon-xietang
  • 高血糖
    .icon-gaoxietang
  • 低血糖
    .icon-dixietang
  • 烧瓶
    .icon-shaoping
  • 烧杯
    .icon-shaobei
  • 住院
    .icon-zhuyuan
  • 出院
    .icon-chuyuan
  • ICU病房
    .icon-ICUbingfang
  • 美容科
    .icon-meirongke
  • 保健
    .icon-baojian
  • 臀部
    .icon-tunbu
  • 西药
    .icon-xiyao
  • 安全
    .icon-anquan
  • 定位
    .icon-dingwei
  • 视力表
    .icon-shilibiao
  • 好评
    .icon-haoping
  • 中评
    .icon-zhongping
  • 差评
    .icon-chaping
  • 标签
    .icon-biaoqian
  • 预约
    .icon-yuyue
  • 就诊
    .icon-jiuzhen
  • 导航
    .icon-daohang
  • 资讯
    .icon-zixun
  • 反馈
    .icon-fankui
  • 计算器
    .icon-jisuanqi
  • 下载
    .icon-xiazai
  • 上传
    .icon-shangchuan
  • 输血
    .icon-shuxie
  • 讲坛
    .icon-jiangtan
  • 氧气罐
    .icon-yangqiguan
  • 急救电话
    .icon-jijiudianhua
  • 药膏
    .icon-yaogao
  • 基因
    .icon-jiyin
  • 邮件
    .icon-youjian
  • 老人
    .icon-laoren
  • 付款
    .icon-fukuan
  • 放射科
    .icon-fangsheke
  • 细胞
    .icon-xibao
  • CT
    .icon-CT
  • 切换
    .icon-qiehuan
  • 避孕套
    .icon-biyuntao
  • 骨折
    .icon-guzhe
  • 近视
    .icon-yanjing
  • 日期
    .icon-riqi
  • 消息
    .icon-xiaoxi
  • 增加
    .icon-zengjia
  • 减少
    .icon-jianshao
  • 删除
    .icon-shanchu
  • 保鲜箱
    .icon-baoxianxiang
  • 团体
    .icon-tuanti
  • 图片
    .icon-tupian
  • 验孕棒
    .icon-yanyunbang
  • 男性
    .icon-nanxing
  • 女性
    .icon-nvxing
  • 脑科
    .icon-naoke1
  • .icon-kong
  • 赞2
    .icon-zan
  • .icon-zan1
  • 圆形未选中
    .icon-yuanxingweixuanzhong
  • 圆形选中-fill
    .icon-yuanxingxuanzhongfill
  • 图片
    .icon-tupian1
  • 医院
    .icon-yiyuan
  • 病房
    .icon-bingfang
  • 医生
    .icon-yisheng
  • 护士
    .icon-hushi
  • 听诊器
    .icon-tingzhenqi
  • 输液
    .icon-shuye
  • 手术刀
    .icon-shoushudao
  • 药箱
    .icon-yaoxiang
  • 显微镜
    .icon-xianweijing
  • 温度计
    .icon-wenduji
  • 体温抢
    .icon-tiwenqiang
  • 药瓶
    .icon-yaoping
  • 血袋
    .icon-xiedai
  • 注射器
    .icon-zhusheqi
  • 电话
    .icon-dianhua
  • 红十字
    .icon-hongshizi
  • 试管
    .icon-shiguan
  • 手术剪
    .icon-shoushujian
  • 测体重
    .icon-cetizhong
  • 测身高
    .icon-ceshengao
  • 心电图
    .icon-xindiantu
  • X光
    .icon-Xguang
  • B超
    .icon-Bchao
  • DNA
    .icon-DNA
  • 病毒
    .icon-bingdu
  • 死亡
    .icon-siwang
  • 病例单
    .icon-binglidan
  • 细菌
    .icon-xijun
  • 文件夹
    .icon-wenjianjia
  • 药丸
    .icon-yaowan
  • 创可贴
    .icon-chuangketie
  • 药片
    .icon-yaopian
  • 药剂
    .icon-yaoji
  • 中药
    .icon-zhongyao
  • 日历
    .icon-rili
  • 脑科
    .icon-naoke
  • 神经科
    .icon-shenjingke
  • 耳科
    .icon-erke
  • 眼科
    .icon-yanke
  • 鼻科
    .icon-bike
  • 牙科
    .icon-yake
  • 胸部
    .icon-xiongbu
  • 腰部
    .icon-yaobu
  • 生殖科
    .icon-shengzhike
  • 男科
    .icon-nanke
  • 妇科
    .icon-fuke
  • 儿科
    .icon-erke1
  • 手部
    .icon-shoubu
  • 脚部
    .icon-jiaobu
  • 咽喉科
    .icon-yanhouke
  • 心脏
    .icon-xinzang
  • 肝脏
    .icon-ganzang
  • .icon-fei
  • .icon-shen
  • .icon-wei
  • 肠道
    .icon-changdao
  • 癌细胞
    .icon-aixibao
  • 疫苗
    .icon-yimiao
  • 骨科
    .icon-guke
  • 心率
    .icon-xinshuai
  • 睡眠
    .icon-shuimian
  • 医典
    .icon-yidian
  • 笔记
    .icon-biji
  • 健康码
    .icon-jiankangma
  • 扫描
    .icon-saomiao
  • 扫描
    .icon-saomiao2
  • 条形码
    .icon-tiaoxingma
  • 二维码
    .icon-erweima
  • 指纹
    .icon-zhiwen
  • 客服
    .icon-kefu
  • 挂号
    .icon-guahao
  • 血型
    .icon-xiexing
  • 药房
    .icon-yaofang
  • 医保
    .icon-yibao
  • 医保卡
    .icon-yibaoka
  • 救护车
    .icon-jiuhuche
  • 救护机
    .icon-jiuhuji
  • 病床
    .icon-bingchuang
  • 担架车
    .icon-danjiache
  • 担架
    .icon-danjia
  • 拐杖
    .icon-guaizhang
  • 轮椅
    .icon-lunyi
  • 康复架
    .icon-kangfujia
  • 口罩
    .icon-kouzhao
  • 手套
    .icon-shoutao

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

  • 防护服
    #icon-fanghufu
  • 护目镜
    #icon-humujing
  • 预警
    #icon-yujing
  • 滴管
    #icon-diguan
  • 棉签
    #icon-mianqian
  • 体检表
    #icon-tijianbiao
  • 磁共振
    #icon-cigongzhen
  • 危险
    #icon-weixian
  • 签字
    #icon-qianzi
  • 残疾人
    #icon-canjiren
  • 孕妇
    #icon-yunfu
  • 测试
    #icon-ceshi
  • 头颅
    #icon-toulu
  • 中医
    #icon-zhongyi
  • 艾滋病
    #icon-aizibing
  • 病例
    #icon-bingli
  • 倒计时
    #icon-daojishi
  • 时间
    #icon-shijian
  • 通知
    #icon-tongzhi
  • 消毒液
    #icon-xiaoduye
  • 实验
    #icon-shiyan
  • 皮肤
    #icon-pifu
  • 营养科
    #icon-yingyangke
  • 免疫
    #icon-mianyi
  • A型血
    #icon-Axingxie
  • B型血
    #icon-Bxingxie
  • O型血
    #icon-Oxingxie
  • AB型血
    #icon-ABxingxie
  • Rh型血
    #icon-Rhxingxie
  • 血糖
    #icon-xietang
  • 高血糖
    #icon-gaoxietang
  • 低血糖
    #icon-dixietang
  • 烧瓶
    #icon-shaoping
  • 烧杯
    #icon-shaobei
  • 住院
    #icon-zhuyuan
  • 出院
    #icon-chuyuan
  • ICU病房
    #icon-ICUbingfang
  • 美容科
    #icon-meirongke
  • 保健
    #icon-baojian
  • 臀部
    #icon-tunbu
  • 西药
    #icon-xiyao
  • 安全
    #icon-anquan
  • 定位
    #icon-dingwei
  • 视力表
    #icon-shilibiao
  • 好评
    #icon-haoping
  • 中评
    #icon-zhongping
  • 差评
    #icon-chaping
  • 标签
    #icon-biaoqian
  • 预约
    #icon-yuyue
  • 就诊
    #icon-jiuzhen
  • 导航
    #icon-daohang
  • 资讯
    #icon-zixun
  • 反馈
    #icon-fankui
  • 计算器
    #icon-jisuanqi
  • 下载
    #icon-xiazai
  • 上传
    #icon-shangchuan
  • 输血
    #icon-shuxie
  • 讲坛
    #icon-jiangtan
  • 氧气罐
    #icon-yangqiguan
  • 急救电话
    #icon-jijiudianhua
  • 药膏
    #icon-yaogao
  • 基因
    #icon-jiyin
  • 邮件
    #icon-youjian
  • 老人
    #icon-laoren
  • 付款
    #icon-fukuan
  • 放射科
    #icon-fangsheke
  • 细胞
    #icon-xibao
  • CT
    #icon-CT
  • 切换
    #icon-qiehuan
  • 避孕套
    #icon-biyuntao
  • 骨折
    #icon-guzhe
  • 近视
    #icon-yanjing
  • 日期
    #icon-riqi
  • 消息
    #icon-xiaoxi
  • 增加
    #icon-zengjia
  • 减少
    #icon-jianshao
  • 删除
    #icon-shanchu
  • 保鲜箱
    #icon-baoxianxiang
  • 团体
    #icon-tuanti
  • 图片
    #icon-tupian
  • 验孕棒
    #icon-yanyunbang
  • 男性
    #icon-nanxing
  • 女性
    #icon-nvxing
  • 脑科
    #icon-naoke1
  • #icon-kong
  • 赞2
    #icon-zan
  • #icon-zan1
  • 圆形未选中
    #icon-yuanxingweixuanzhong
  • 圆形选中-fill
    #icon-yuanxingxuanzhongfill
  • 图片
    #icon-tupian1
  • 医院
    #icon-yiyuan
  • 病房
    #icon-bingfang
  • 医生
    #icon-yisheng
  • 护士
    #icon-hushi
  • 听诊器
    #icon-tingzhenqi
  • 输液
    #icon-shuye
  • 手术刀
    #icon-shoushudao
  • 药箱
    #icon-yaoxiang
  • 显微镜
    #icon-xianweijing
  • 温度计
    #icon-wenduji
  • 体温抢
    #icon-tiwenqiang
  • 药瓶
    #icon-yaoping
  • 血袋
    #icon-xiedai
  • 注射器
    #icon-zhusheqi
  • 电话
    #icon-dianhua
  • 红十字
    #icon-hongshizi
  • 试管
    #icon-shiguan
  • 手术剪
    #icon-shoushujian
  • 测体重
    #icon-cetizhong
  • 测身高
    #icon-ceshengao
  • 心电图
    #icon-xindiantu
  • X光
    #icon-Xguang
  • B超
    #icon-Bchao
  • DNA
    #icon-DNA
  • 病毒
    #icon-bingdu
  • 死亡
    #icon-siwang
  • 病例单
    #icon-binglidan
  • 细菌
    #icon-xijun
  • 文件夹
    #icon-wenjianjia
  • 药丸
    #icon-yaowan
  • 创可贴
    #icon-chuangketie
  • 药片
    #icon-yaopian
  • 药剂
    #icon-yaoji
  • 中药
    #icon-zhongyao
  • 日历
    #icon-rili
  • 脑科
    #icon-naoke
  • 神经科
    #icon-shenjingke
  • 耳科
    #icon-erke
  • 眼科
    #icon-yanke
  • 鼻科
    #icon-bike
  • 牙科
    #icon-yake
  • 胸部
    #icon-xiongbu
  • 腰部
    #icon-yaobu
  • 生殖科
    #icon-shengzhike
  • 男科
    #icon-nanke
  • 妇科
    #icon-fuke
  • 儿科
    #icon-erke1
  • 手部
    #icon-shoubu
  • 脚部
    #icon-jiaobu
  • 咽喉科
    #icon-yanhouke
  • 心脏
    #icon-xinzang
  • 肝脏
    #icon-ganzang
  • #icon-fei
  • #icon-shen
  • #icon-wei
  • 肠道
    #icon-changdao
  • 癌细胞
    #icon-aixibao
  • 疫苗
    #icon-yimiao
  • 骨科
    #icon-guke
  • 心率
    #icon-xinshuai
  • 睡眠
    #icon-shuimian
  • 医典
    #icon-yidian
  • 笔记
    #icon-biji
  • 健康码
    #icon-jiankangma
  • 扫描
    #icon-saomiao
  • 扫描
    #icon-saomiao2
  • 条形码
    #icon-tiaoxingma
  • 二维码
    #icon-erweima
  • 指纹
    #icon-zhiwen
  • 客服
    #icon-kefu
  • 挂号
    #icon-guahao
  • 血型
    #icon-xiexing
  • 药房
    #icon-yaofang
  • 医保
    #icon-yibao
  • 医保卡
    #icon-yibaoka
  • 救护车
    #icon-jiuhuche
  • 救护机
    #icon-jiuhuji
  • 病床
    #icon-bingchuang
  • 担架车
    #icon-danjiache
  • 担架
    #icon-danjia
  • 拐杖
    #icon-guaizhang
  • 轮椅
    #icon-lunyi
  • 康复架
    #icon-kangfujia
  • 口罩
    #icon-kouzhao
  • 手套
    #icon-shoutao

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>