• 解绑
    
  • 选中
    
  • 问号
    
  • 待办
    
  • 分组 3
    
  • 架构
    
  • 历史
    
  • 历史
    
  • 跳过
    
  • 团队
    
  • 告警实心
    
  • 草稿箱
    
  • 上传
    
  • Warning
    
  • 远程麻醉评估
    
  • 门诊患者
    
  • 远程B超
    
  • 远程病理
    
  • 远程会诊
    
  • 远程影像
    
  • 远程心电
    
  • MDT类型
    
  • 删除
    
  • 左箭头
    
  • 右箭头
    
  • icon-用户
    
  • 提示
    
  • 签到失败
    
  • 签到成功
    
  • 二维码 1
    
  • 解锁 1
    
  • icon_class_hp
    
  • 院内大会诊
    
  • 会议厅
    
  • 会议厅-copy
    
  • 圆环
    
  • 选中
    
  • 感叹号
    
  • 远程会诊
    
  • 跳过
    
  • 筛选
    
  • 显示列
    
  • 收起
    
  • 收起-copy
    
  • 审核列表
    
  • 审核列表
    
  • 排班管理
    
  • 短信
    
  • 动态口令
    
  • 时间
    
  • 领带
    
  • 客服
    
  • 客服-copy
    
  • 缩小
    
  • 放大
    
  • 远程门诊面性 2
    
  • 分享
    
  • 随访
    
  • 语音
    
  • 记录
    
  • 收藏
    
  • 记录-copy
    
  • 记录-copy-copy
    
  • 记录-copy
    
  • 记录-copy-copy
    
  • 听筒
    
  • 用户管理 1
    
  • 共享
    
  • 右箭头
    
  • 添加
    
  • 搜索
    
  • Vector
    
  • 音视频会议黑色
    
  • 更多
    
  • 成员
    
  • 相机切换
    
  • 眼睛
    
  • 路径
    
  • 最小化
    
  • 转出
    
  • 转入
    
  • Vector
    
  • 开启视频
    
  • 音频
    
  • 箭头
    
  • 关闭
    
  • 扬声器
    
  • 20J语音转文字
    
  • 二维码
    
  • 邮箱
    
  • 电话
    
  • 护士站
    
  • 护理
    
  • 搜索
    
  • 电话
    
  • 评分
    
  • 申诉
    
  • 我的
    
  • 修改
    
  • 维持
    
  • 撤销
    
  • 上报
    
  • 已取消
    
  • 已撤销
    
  • 右箭头
    
  • 重命名
    
  • 申请会诊
    
  • 急会诊
    
  • 应邀会诊
    
  • 审核成功
    
  • 搜索框
    
  • 检验列表
    
  • 列表形式 (1)
    
  • 列表形式
    
  • 扬声器
    
  • 设备-扬声器静音
    
  • 关闭
    
  • 质量
    
  • 16_视频_截图_默认
    
  • 展开收起-上
    
  • 展开收起-下
    
  • 骷髅头-线
    
  • 其他配置
    
  • 手术
    
  • 药丸
    
  • 住院患者
    
  • 手术复盘
    
  • 门诊患者
    
  • 编辑
    
  • 分享二维码
    
  • 分享记录
    
  • 随访
    
  • 关闭
    
  • 分享
    
  • 
  • 文件夹
    
  • 新建病例
    
  • 关闭
    
  • 添加
    
  • 7
    
  • 单选
    
  • 剪刀_剪刀
    
  • 仪表盘
    
  • 计划
    
  • 邀请
    
  • 面性病人图标
    
  • 
  • 视频
    
  • 视频
    
  • 拍照
    
  • 消息
    
  • 文件夹
    
  • 共享
    
  • 共享
    
  • 简洁信息
    
  • 睁眼
    
  • 闭眼
    
  • 信息更多
    
  • 电话
    
  • 未收藏
    
  • 播放
    
  • 旋转
    
  • 图片详情
    
  • OCR
    
  • 向下
    
  • 向上
    
  • 收起
    
  • filter
    
  • 下载
    
  • 删除
    
  • 共享
    
  • 重命名
    
  • 文件移动
    
  • 删除
    
  • 文档
    
  • 视频
    
  • 多人
    
  • 列表
    
  • 排序
    
  • 缩略图
    
  • 视频文件
    
  • 未知文件
    
  • 文件夹
    
  • PDF
    
  • WORD
    
  • 右箭头
    
  • 消息
    
  • 设置
    
  • 退出登录电脑
    
  • 电脑
    
  • 打钩
    
  • 眼睛
    
  • 眼睛
    
  • 
  • 拖动位置
    
  • 22-顺序、拖动
    
  • 更 多
    
  • 签到
    
  • 国际站_选 中
    
  • 未 选中 (1)
    
  • 已签到
    
  • 申请
    
  • 二维码
    
  • 直播 未选中
    
  • 拨号盘
    
  • 屏幕共享1
    
  • 菜单
    
  • 关 闭
    
  • 手写签名
    
  • 查询中心
    
  • 上传
    
  • 签名
    
  • 
  • 切换
    
  • 链接
    
  • 锁定
    
  • 定位线
    
  • 体检
    
  • 解除锁定
    
  • 锁定
    
  • 未知文件
    
  • 音频
    
  • 
  • 
  • 停止录音
    
  • OCR识别异常记录
    
  • 拨号
    
  • 信息 短信 消息 提醒 邮件 私信 邮箱
    
  • 转科
    
  • 复制
    
  • 验证码
    
  • 出院小结
    
  • 引导箭头
    
  • 引导-箭头
    
  • 企业微信
    
  • 分享
    
  • 微信
    
  • 二维码
    
  • 链接
    
  • 钉钉
    
  • 右旋转
    
  • 收 藏
    
  • 摄像头切换
    
  • 
  • 更多
    
  • 
  • 步骤空心圆
    
  • 历史
    
  • 手术
    
  • 暂停
    
  • 播放
    
  • 拨打电话
    
  • 
  • 云盘
    
  • 预警灯
    
  • 医院
    
  • 门诊室
    
  • 医院
    
  • 筛选
    
  • 警告
    
  • 性别-未知
    
  • 性别-男
    
  • 性别 女 线性
    
  • 24顶栏_云盘
    
  • 申请
    
  • 生命线_lifeline13
    
  • 个人资料
    
  • ico_医生工作站_医嘱管理(新)
    
  • 审核 (1)
    
  • 讨论
    
  • 讨论
    
  • 医嘱
    
  • dx
    
  • 检验
    
  • 听诊器,诊断,stethoscope
    
  • 文档云盘
    
  • 资料
    
  • 锤子
    
  • 成功
    
  • 箭头
    
  • 箭头
    
  • 通知 (1)
    
  • pdf
    
  • ppt
    
  • WORD
    
  • 上传图片
    
  • TEXT
    
  • Excel
    
  • play
    
  • 
  • 菜单
    
  • 电子签名约定书
    
  • 列表
    
  • 开票申请
    
  • 记录
    
  • pdf
    
  • 屏幕共享
    
  • 开关 开
    
  • 开关 开
    
  • 
  • 
  • 错误
    
  • 右三角
    
  • 右三角
    
  • 键盘
    
  • 加号-01
    
  • 双箭头
    
  • 向右
    
  • 向右
    
  • 话筒
    
  • 音量
    
  • 挂断
    
  • 
  • 翻转镜头
    
  • 网络错误
    
  • 缩小
    
  • 相机
    
  • 屏幕全屏
    
  • 声音
    
  • 
  • Artboard Copy 100
    
  • Artboard Copy 36
    
  • 我的
    
  • 首页 填充
    
  • 通讯录_填充
    
  • 消息-填充
    
  • 分享-理财成就
    
  • 垃圾桶
    
  • 日历 日期
    
  • 添加 加号 无边框
    
  • x
    
  • 更多 小
    
  • 顶部
    
  • 更多
    
  • 计算器
    
  • 待办事项-1
    
  • 关于我们
    
  • 微信
    
  • 用户访问记录
    
  • 病历
    
  • 分享
    
  • 选择
    
  • 图片加载失败-02
    
  • 医生
    
  • 分享
    
  • 右箭头
    
  • 首页
    
  • 设置
    
  • 摄像
    
  • 星号
    
  • 警告
    
  • 信息
    
  • 通讯录
    
  • 人12
    
  • 警告
    
  • 添加
    
  • 人12
    
  • 三角形-up
    
  • 二维码
    
  • 通讯录
    
  • 好房拓 4.0.0 iconfont 2_医院
    
  • 会议
    
  • 待办
    
  • 组织架构
    
  • 医院-2
    
  • 二维码
    
  • 语音
    
  • 
  • 眼睛-闭
    
  • 垃圾桶
    
  • 通讯录
    
  • 
  • 住院管理
    
  • pdf
    
  • 图片
    
  • 收藏
    
  • 生病
    
  • 医疗
    
  • 扫一扫
    
  • 医院管理1
    
  • 地图
    
  • 添加好友
    
  • 目标端
    
  • 语音
    
  • 二维码
    
  • 信息
    
  • 编辑
    
  • 文件夹
    
  • 图片
    
  • 语音
    
  • 医院资讯-填充
    
  • 审核通过
    
  • 审批管理
    
  • 分享
    
  • 用户管理
    
  • 睁眼
    
  • 印章管理
    
  • 刷新
    
  • 垃圾桶
    
  • 文件夹
    
  • 医院
    
  • 医疗宝典
    
  • 搜索
    
  • 我的
    
  • 医生
    
  • 远程帮教
    
  • 最近来访
    
  • 说明
    
  • 014中西医结合微创靶向疗法
    
  • 医生
    
  • 最近联系人-im
    
  • 分享
    
  • 帮助
    
  • 分享
    
  • 三角下
    
  • 节点-统计
    
  • 病史
    
  • 朋友圈
    
  • 曲线
    
  • 语音
    
  • 拍照
    
  • 后十年 密码
    
  • 二维码
    
  • 手机
    
  • 添加
    
  • 相机
    
  • 地图
    
  • 对号
    
  • 中西医结合微创靶向疗法
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1735892750416') format('woff2'),
       url('iconfont.woff?t=1735892750416') format('woff'),
       url('iconfont.ttf?t=1735892750416') 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-a-ziyuan8
  • 选中
    .icon-check-circle
  • 问号
    .icon-iconfontwenhao1
  • 待办
    .icon-a-task1
  • 分组 3
    .icon-a-fenzu3
  • 架构
    .icon-a-Vector2
  • 历史
    .icon-a-Union1
  • 历史
    .icon-Vector3
  • 跳过
    .icon-a-Vector1
  • 团队
    .icon-Union
  • 告警实心
    .icon-tixingshixin
  • 草稿箱
    .icon-caogaoxiang
  • 上传
    .icon-shangchuan1
  • Warning
    .icon-Warning
  • 远程麻醉评估
    .icon-Vector4
  • 门诊患者
    .icon-menzhenhuanzhe
  • 远程B超
    .icon-yuanchengBchao
  • 远程病理
    .icon-yuanchengbingli
  • 远程会诊
    .icon-yuanchenghuizhen1
  • 远程影像
    .icon-yuanchengyingxiang
  • 远程心电
    .icon-yuanchengxindian
  • MDT类型
    .icon-Vector2
  • 删除
    .icon-jiufuqianbaoicon08
  • 左箭头
    .icon-zuojiantou
  • 右箭头
    .icon-youjiantou3
  • icon-用户
    .icon-icon-yonghu
  • 提示
    .icon-tishi
  • 签到失败
    .icon-qiandaoshibai
  • 签到成功
    .icon-qiandaochenggong
  • 二维码 1
    .icon-a-erweima1
  • 解锁 1
    .icon-a-jiesuo1
  • icon_class_hp
    .icon-icon_class_hp
  • 院内大会诊
    .icon-yuanneidahuizhen
  • 会议厅
    .icon-huiyiting
  • 会议厅-copy
    .icon-huiyiting-copy
  • 圆环
    .icon-yuanhuan-red
  • 选中
    .icon-xuanzhong2
  • 感叹号
    .icon-gantanhao1
  • 远程会诊
    .icon-yuanchenghuizhen
  • 跳过
    .icon-tiaoguo
  • 筛选
    .icon-shaixuan1
  • 显示列
    .icon-y
  • 收起
    .icon-shouqi1
  • 收起-copy
    .icon-shouqi1-copy
  • 审核列表
    .icon-shenheliebiao1
  • 审核列表
    .icon-shenheliebiao
  • 排班管理
    .icon-paibanguanli
  • 短信
    .icon-duanxin
  • 动态口令
    .icon-dongtaikouling
  • 时间
    .icon-shijian
  • 领带
    .icon-lingdai
  • 客服
    .icon-kefu
  • 客服-copy
    .icon-kefu-copy
  • 缩小
    .icon-suoxiao11
  • 放大
    .icon-fangda
  • 远程门诊面性 2
    .icon-a-yuanchengmenzhenmianxing2
  • 分享
    .icon-fenxiang2
  • 随访
    .icon-dingdan
  • 语音
    .icon-a-yuyin1
  • 记录
    .icon-bofangjilu
  • 收藏
    .icon-shoucang2
  • 记录-copy
    .icon-bofangjilu-copy
  • 记录-copy-copy
    .icon-bofangjilu-copy-copy
  • 记录-copy
    .icon-bofangjilu-copy1
  • 记录-copy-copy
    .icon-bofangjilu-copy-copy1
  • 听筒
    .icon-tingtong
  • 用户管理 1
    .icon-a-yonghuguanli1
  • 共享
    .icon-gongxiang3
  • 右箭头
    .icon-a-Group2
  • 添加
    .icon-AddCircleOutline
  • 搜索
    .icon-sousuo1
  • Vector
    .icon-Vector1
  • 音视频会议黑色
    .icon-yinshipinhuiyiheise
  • 更多
    .icon-gengduo1
  • 成员
    .icon-chengyuan
  • 相机切换
    .icon-xiangjiqiehuan
  • 眼睛
    .icon-yanjing2
  • 路径
    .icon-lujing
  • 最小化
    .icon-a-xingzhuang2
  • 转出
    .icon-zhuanchu
  • 转入
    .icon-zhuanru
  • Vector
    .icon-Vector
  • 开启视频
    .icon-kaiqishipin
  • 音频
    .icon-yinpin1
  • 箭头
    .icon-jiantou1
  • 关闭
    .icon-guanbi4
  • 扬声器
    .icon-yangshengqi1
  • 20J语音转文字
    .icon-a-20Jyuyinzhuanwenzi
  • 二维码
    .icon-erweima5
  • 邮箱
    .icon-youxiang
  • 电话
    .icon-dianhua2
  • 护士站
    .icon-hushizhan
  • 护理
    .icon-huli
  • 搜索
    .icon-search
  • 电话
    .icon-dianhua1
  • 评分
    .icon-pingfen
  • 申诉
    .icon-shensu
  • 我的
    .icon-wode2
  • 修改
    .icon-xiugai
  • 维持
    .icon-weichi
  • 撤销
    .icon-chexiao
  • 上报
    .icon-shangbao
  • 已取消
    .icon-yiquxiao
  • 已撤销
    .icon-yichexiao
  • 右箭头
    .icon-youjiantou2
  • 重命名
    .icon-zhongmingming1
  • 申请会诊
    .icon-shenqinghuizhen
  • 急会诊
    .icon-jihuizhen
  • 应邀会诊
    .icon-yingyaohuizhen
  • 审核成功
    .icon-shenhechenggong
  • 搜索框
    .icon-sousuokuang
  • 检验列表
    .icon-jianyanliebiao
  • 列表形式 (1)
    .icon-a-liebiaoxingshi1
  • 列表形式
    .icon-liebiaoxingshi
  • 扬声器
    .icon-yangshengqi
  • 设备-扬声器静音
    .icon-shebei-yangshengqiyinliang
  • 关闭
    .icon-guanbi3
  • 质量
    .icon-zhiliang
  • 16_视频_截图_默认
    .icon-_shipin_jietu_moren
  • 展开收起-上
    .icon-zhankaishouqi-shang
  • 展开收起-下
    .icon-zhankaishouqi-xia
  • 骷髅头-线
    .icon-kuloutou-xian
  • 其他配置
    .icon-qitapeizhi
  • 手术
    .icon-shoushu1
  • 药丸
    .icon-yaowan
  • 住院患者
    .icon-zhuyuanhuanzhe
  • 手术复盘
    .icon-shoushufupan
  • 门诊患者
    .icon-menzhenhuanzhe2
  • 编辑
    .icon-bianji1
  • 分享二维码
    .icon-fenxiangerweima
  • 分享记录
    .icon-fenxiangjilu
  • 随访
    .icon-suifang
  • 关闭
    .icon-guanbi2
  • 分享
    .icon-fenxiang4
  • .icon-cha
  • 文件夹
    .icon-wenjianjia4
  • 新建病例
    .icon-xinjianbingli
  • 关闭
    .icon-guanbi1
  • 添加
    .icon-tianjia2
  • 7
    .icon-a-7
  • 单选
    .icon-danxuan
  • 剪刀_剪刀
    .icon-jiandao_jiandao-copy
  • 仪表盘
    .icon-dashboard-fill
  • 计划
    .icon-jihua
  • 邀请
    .icon-yaoqing
  • 面性病人图标
    .icon-mianxingbingrentubiao
  • .icon-jian1-copy
  • 视频
    .icon-shipin2
  • 视频
    .icon-shipin1
  • 拍照
    .icon-paizhao1
  • 消息
    .icon-xiaoxi1
  • 文件夹
    .icon-wenjianjia3
  • 共享
    .icon-gongxiang2
  • 共享
    .icon-gongxiang1
  • 简洁信息
    .icon-jianjiexinxi
  • 睁眼
    .icon-zhengyan
  • 闭眼
    .icon-biyan
  • 信息更多
    .icon-xinxigengduo
  • 电话
    .icon-dianhua
  • 未收藏
    .icon-weishoucang
  • 播放
    .icon-11
  • 旋转
    .icon-xuanzhuan
  • 图片详情
    .icon-tupianxiangqing
  • OCR
    .icon-OCR
  • 向下
    .icon-xiangxia
  • 向上
    .icon-xiangshang
  • 收起
    .icon-shouqi
  • filter
    .icon-filter
  • 下载
    .icon-xiazai
  • 删除
    .icon-shanchu1
  • 共享
    .icon-gongxiang
  • 重命名
    .icon-zhongmingming
  • 文件移动
    .icon-wenjianyidong
  • 删除
    .icon-shanchu
  • 文档
    .icon-jinlingyingcaiwangtubiao45
  • 视频
    .icon-shipin
  • 多人
    .icon-duoren
  • 列表
    .icon-liebiao1
  • 排序
    .icon-paixu
  • 缩略图
    .icon-suolvetu
  • 视频文件
    .icon-file_type_video
  • 未知文件
    .icon-weizhiwenjian1
  • 文件夹
    .icon-wenjianjia2
  • PDF
    .icon-PDF
  • WORD
    .icon-WORD1
  • 右箭头
    .icon-youjiantou1
  • 消息
    .icon-xiaoxi
  • 设置
    .icon-shezhi1
  • 退出登录电脑
    .icon-tuichudengludiannao
  • 电脑
    .icon-diannao
  • 打钩
    .icon-check-smooth
  • 眼睛
    .icon-yanjing
  • 眼睛
    .icon-yanjing1
  • .icon-gou
  • 拖动位置
    .icon-tuodongweizhi
  • 22-顺序、拖动
    .icon-22-shunxutuodong
  • 更 多
    .icon-gengduo
  • 签到
    .icon-qiandao
  • 国际站_选 中
    .icon-xuanzhong
  • 未 选中 (1)
    .icon-weixuanzhong
  • 已签到
    .icon-yiqiandao
  • 申请
    .icon-shenqing1
  • 二维码
    .icon-qrcode
  • 直播 未选中
    .icon-zhiboweixuanzhong
  • 拨号盘
    .icon-bohaopan
  • 屏幕共享1
    .icon-pingmugongxiang1
  • 菜单
    .icon-caidan
  • 关 闭
    .icon-guanbi
  • 手写签名
    .icon-shouxieqianming
  • 查询中心
    .icon-chaxunzhongxin
  • 上传
    .icon-shangchuan
  • 签名
    .icon-qianming
  • .icon-pen
  • 切换
    .icon-qiehuan
  • 链接
    .icon-lianjie
  • 锁定
    .icon-suoding
  • 定位线
    .icon-dx1
  • 体检
    .icon-tijian
  • 解除锁定
    .icon-jiechusuoding
  • 锁定
    .icon-suoding1
  • 未知文件
    .icon-weizhiwenjian
  • 音频
    .icon-yinpin
  • .icon-xia3
  • .icon-shang2
  • 停止录音
    .icon-tingzhiluyin
  • OCR识别异常记录
    .icon-OCRshibieyichangjilu
  • 拨号
    .icon-bohao
  • 信息 短信 消息 提醒 邮件 私信 邮箱
    .icon-xinxiduanxinxiaoxitixingyoujiansixinyouxiang
  • 转科
    .icon-zhuanke
  • 复制
    .icon-fuzhi
  • 验证码
    .icon-yanzhengma
  • 出院小结
    .icon-icon202
  • 引导箭头
    .icon-yindaojiantou
  • 引导-箭头
    .icon-iconjt
  • 企业微信
    .icon-qiyeweixin
  • 分享
    .icon-fenxiang3
  • 微信
    .icon-weixin2
  • 二维码
    .icon-erweima4
  • 链接
    .icon-Group-1
  • 钉钉
    .icon-dingding
  • 右旋转
    .icon-youxuanzhuan
  • 收 藏
    .icon-shoucang1
  • 摄像头切换
    .icon-fanzhuanjingtou1
  • .icon-xia
  • 更多
    .icon-icon-toolbar-sys-more
  • .icon-little-down
  • 步骤空心圆
    .icon-buzhoukongxinyuan
  • 历史
    .icon-lishi
  • 手术
    .icon-shoushu
  • 暂停
    .icon-zanting
  • 播放
    .icon-bofang
  • 拨打电话
    .icon-dadianhua
  • .icon-left
  • 云盘
    .icon-yunpan
  • 预警灯
    .icon-yujingdeng
  • 医院
    .icon-Exampleofhospital
  • 门诊室
    .icon-menzhenshi
  • 医院
    .icon-yiyuan1
  • 筛选
    .icon-shaixuan
  • 警告
    .icon-jinggao
  • 性别-未知
    .icon-xingbie-weizhi
  • 性别-男
    .icon-iconcle07
  • 性别 女 线性
    .icon-xingbienvxianxing
  • 24顶栏_云盘
    .icon-24dinglanyunpan
  • 申请
    .icon-shenqing
  • 生命线_lifeline13
    .icon-shengmingxian_lifeline
  • 个人资料
    .icon-gerenziliao
  • ico_医生工作站_医嘱管理(新)
    .icon-ico_yishenggongzuozhan_yizhuguanlixin
  • 审核 (1)
    .icon-shenhe1
  • 讨论
    .icon-taolun
  • 讨论
    .icon-taolun1
  • 医嘱
    .icon-yizhu
  • dx
    .icon-dx
  • 检验
    .icon-jianyan
  • 听诊器,诊断,stethoscope
    .icon-stethoscope
  • 文档云盘
    .icon-icon_cloud
  • 资料
    .icon-ziliao
  • 锤子
    .icon-chuizi
  • 成功
    .icon-chenggong
  • 箭头
    .icon-jiantou-copy
  • 箭头
    .icon-jiantou
  • 通知 (1)
    .icon-tongzhi
  • pdf
    .icon-pdf2
  • ppt
    .icon-ppt
  • WORD
    .icon-WORD
  • 上传图片
    .icon-shangchuantupian
  • TEXT
    .icon-TEXT
  • Excel
    .icon-Excel
  • play
    .icon-play
  • .icon-zuo
  • 菜单
    .icon-ego-menu
  • 电子签名约定书
    .icon-dianziqianmingyuedingshu201
  • 列表
    .icon-liebiao
  • 开票申请
    .icon-kaipiaoshenqing
  • 记录
    .icon-jilu
  • pdf
    .icon-pdf1
  • 屏幕共享
    .icon-wendang
  • 开关 开
    .icon-kaiguanclose-copy
  • 开关 开
    .icon-kaiguanclose
  • .icon-you1
  • .icon-xia1
  • 错误
    .icon-cuowu
  • 右三角
    .icon-yousanjiao-copy
  • 右三角
    .icon-yousanjiao
  • 键盘
    .icon-jianpan
  • 加号-01
    .icon-jiahao01
  • 双箭头
    .icon-shuangjiantou
  • 向右
    .icon-unie623
  • 向右
    .icon-unie623-copy
  • 话筒
    .icon-msnui-mic-inverse
  • 音量
    .icon-yinliang
  • 挂断
    .icon-guaduan
  • .icon-ku
  • 翻转镜头
    .icon-fanzhuanjingtou
  • 网络错误
    .icon-wangluocuowu
  • 缩小
    .icon-suoxiao1
  • 相机
    .icon-xiangji1
  • 屏幕全屏
    .icon-pingmuquanping
  • 声音
    .icon-shengyin-copy
  • .icon-jian
  • Artboard Copy 100
    .icon-ArtboardCopy2
  • Artboard Copy 36
    .icon-ArtboardCopy1
  • 我的
    .icon-ArtboardCopy
  • 首页 填充
    .icon-yunyi-tianchong
  • 通讯录_填充
    .icon-tongxunlu_tianchong
  • 消息-填充
    .icon-xiaoxi-tianchong
  • 分享-理财成就
    .icon-fenxianglicaichengjiu
  • 垃圾桶
    .icon-lajitong
  • 日历 日期
    .icon-riliriqi
  • 添加 加号 无边框
    .icon-tianjiajiahaowubiankuang
  • x
    .icon-x-copy
  • 更多 小
    .icon-gengduoxiao
  • 顶部
    .icon-dingbu
  • 更多
    .icon-101
  • 计算器
    .icon-ai-calculator
  • 待办事项-1
    .icon-icon-todo
  • 关于我们
    .icon-moban
  • 微信
    .icon-weixin1
  • 用户访问记录
    .icon-icon
  • 病历
    .icon-shouye
  • 分享
    .icon-fenxiang1
  • 选择
    .icon-xuanze
  • 图片加载失败-02
    .icon-tupianjiazaishibai02
  • 医生
    .icon-yisheng
  • 分享
    .icon-icon_share
  • 右箭头
    .icon-youjiantou
  • 首页
    .icon-shouye1
  • 设置
    .icon-shezhi
  • 摄像
    .icon-ai14
  • 星号
    .icon-jiufuqianbaoicon14
  • 警告
    .icon-wuuiconsuotanhao
  • 信息
    .icon-mes
  • 通讯录
    .icon-tongxunlu
  • 人12
    .icon-ren121
  • 警告
    .icon-warning
  • 添加
    .icon-tianjia1
  • 人12
    .icon-ren12
  • 三角形-up
    .icon-sanjiaoxing-up
  • 二维码
    .icon-erweima1
  • 通讯录
    .icon-tongxunlu1
  • 好房拓 4.0.0 iconfont 2_医院
    .icon-haofangtuo400iconfont2yiyuan
  • 会议
    .icon-huiyi
  • 待办
    .icon-daiban
  • 组织架构
    .icon-zuzhijiagou
  • 医院-2
    .icon-yiyuan-2
  • 二维码
    .icon-erweima3
  • 语音
    .icon-yuyin2
  • .icon-shang1
  • 眼睛-闭
    .icon-yanjing-bi
  • 垃圾桶
    .icon-lajitong1
  • 通讯录
    .icon-tongxunlu2
  • .icon-dui
  • 住院管理
    .icon-zhuyuanguanli
  • pdf
    .icon-pdf
  • 图片
    .icon-tupian
  • 收藏
    .icon-shoucang
  • 生病
    .icon--sick
  • 医疗
    .icon-yiliao
  • 扫一扫
    .icon-saoyisao
  • 医院管理1
    .icon-yiyuanguanli
  • 地图
    .icon-ditu1
  • 添加好友
    .icon-add-friends_icon
  • 目标端
    .icon-aim
  • 语音
    .icon-yuyin
  • 二维码
    .icon-erweima2
  • 信息
    .icon-xinxi
  • 编辑
    .icon-bianji
  • 文件夹
    .icon-wenjianjia
  • 图片
    .icon-tupian1
  • 语音
    .icon-yuyin3
  • 医院资讯-填充
    .icon-yiyuanzixun-tianchong
  • 审核通过
    .icon-shenhetongguo
  • 审批管理
    .icon-shenpiguanli
  • 分享
    .icon-share
  • 用户管理
    .icon-drxx10
  • 睁眼
    .icon-icon-eye-open
  • 印章管理
    .icon-seal
  • 刷新
    .icon-icon--
  • 垃圾桶
    .icon-icon--1
  • 文件夹
    .icon-wenjianjia1
  • 医院
    .icon-yiyuan
  • 医疗宝典
    .icon-yiliaobaodian
  • 搜索
    .icon-sousuo
  • 我的
    .icon-wode
  • 医生
    .icon-yisheng2
  • 远程帮教
    .icon-yuanchengbangjiao
  • 最近来访
    .icon-zuijinlaifang
  • 说明
    .icon-shuoming
  • 014中西医结合微创靶向疗法
    .icon-zhongxiyijieheweichuangbaxiangliaofa
  • 医生
    .icon-yisheng1
  • 最近联系人-im
    .icon-zuijinlianxirenim
  • 分享
    .icon-msnui-share
  • 帮助
    .icon-bangzhu
  • 分享
    .icon-fenxiang
  • 三角下
    .icon-triangle-bottom
  • 节点-统计
    .icon-jiediantongji
  • 病史
    .icon-bingshi
  • 朋友圈
    .icon-pengyouquan
  • 曲线
    .icon-quxian
  • 语音
    .icon-yuyin1
  • 拍照
    .icon-paizhao
  • 后十年 密码
    .icon-mima
  • 二维码
    .icon-erweima
  • 手机
    .icon-shouji-copy
  • 添加
    .icon-tianjia
  • 相机
    .icon-xiangji
  • 地图
    .icon-ditu
  • 对号
    .icon-duihaocheckmark17
  • 中西医结合微创靶向疗法
    .icon-214

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-a-ziyuan8
  • 选中
    #icon-check-circle
  • 问号
    #icon-iconfontwenhao1
  • 待办
    #icon-a-task1
  • 分组 3
    #icon-a-fenzu3
  • 架构
    #icon-a-Vector2
  • 历史
    #icon-a-Union1
  • 历史
    #icon-Vector3
  • 跳过
    #icon-a-Vector1
  • 团队
    #icon-Union
  • 告警实心
    #icon-tixingshixin
  • 草稿箱
    #icon-caogaoxiang
  • 上传
    #icon-shangchuan1
  • Warning
    #icon-Warning
  • 远程麻醉评估
    #icon-Vector4
  • 门诊患者
    #icon-menzhenhuanzhe
  • 远程B超
    #icon-yuanchengBchao
  • 远程病理
    #icon-yuanchengbingli
  • 远程会诊
    #icon-yuanchenghuizhen1
  • 远程影像
    #icon-yuanchengyingxiang
  • 远程心电
    #icon-yuanchengxindian
  • MDT类型
    #icon-Vector2
  • 删除
    #icon-jiufuqianbaoicon08
  • 左箭头
    #icon-zuojiantou
  • 右箭头
    #icon-youjiantou3
  • icon-用户
    #icon-icon-yonghu
  • 提示
    #icon-tishi
  • 签到失败
    #icon-qiandaoshibai
  • 签到成功
    #icon-qiandaochenggong
  • 二维码 1
    #icon-a-erweima1
  • 解锁 1
    #icon-a-jiesuo1
  • icon_class_hp
    #icon-icon_class_hp
  • 院内大会诊
    #icon-yuanneidahuizhen
  • 会议厅
    #icon-huiyiting
  • 会议厅-copy
    #icon-huiyiting-copy
  • 圆环
    #icon-yuanhuan-red
  • 选中
    #icon-xuanzhong2
  • 感叹号
    #icon-gantanhao1
  • 远程会诊
    #icon-yuanchenghuizhen
  • 跳过
    #icon-tiaoguo
  • 筛选
    #icon-shaixuan1
  • 显示列
    #icon-y
  • 收起
    #icon-shouqi1
  • 收起-copy
    #icon-shouqi1-copy
  • 审核列表
    #icon-shenheliebiao1
  • 审核列表
    #icon-shenheliebiao
  • 排班管理
    #icon-paibanguanli
  • 短信
    #icon-duanxin
  • 动态口令
    #icon-dongtaikouling
  • 时间
    #icon-shijian
  • 领带
    #icon-lingdai
  • 客服
    #icon-kefu
  • 客服-copy
    #icon-kefu-copy
  • 缩小
    #icon-suoxiao11
  • 放大
    #icon-fangda
  • 远程门诊面性 2
    #icon-a-yuanchengmenzhenmianxing2
  • 分享
    #icon-fenxiang2
  • 随访
    #icon-dingdan
  • 语音
    #icon-a-yuyin1
  • 记录
    #icon-bofangjilu
  • 收藏
    #icon-shoucang2
  • 记录-copy
    #icon-bofangjilu-copy
  • 记录-copy-copy
    #icon-bofangjilu-copy-copy
  • 记录-copy
    #icon-bofangjilu-copy1
  • 记录-copy-copy
    #icon-bofangjilu-copy-copy1
  • 听筒
    #icon-tingtong
  • 用户管理 1
    #icon-a-yonghuguanli1
  • 共享
    #icon-gongxiang3
  • 右箭头
    #icon-a-Group2
  • 添加
    #icon-AddCircleOutline
  • 搜索
    #icon-sousuo1
  • Vector
    #icon-Vector1
  • 音视频会议黑色
    #icon-yinshipinhuiyiheise
  • 更多
    #icon-gengduo1
  • 成员
    #icon-chengyuan
  • 相机切换
    #icon-xiangjiqiehuan
  • 眼睛
    #icon-yanjing2
  • 路径
    #icon-lujing
  • 最小化
    #icon-a-xingzhuang2
  • 转出
    #icon-zhuanchu
  • 转入
    #icon-zhuanru
  • Vector
    #icon-Vector
  • 开启视频
    #icon-kaiqishipin
  • 音频
    #icon-yinpin1
  • 箭头
    #icon-jiantou1
  • 关闭
    #icon-guanbi4
  • 扬声器
    #icon-yangshengqi1
  • 20J语音转文字
    #icon-a-20Jyuyinzhuanwenzi
  • 二维码
    #icon-erweima5
  • 邮箱
    #icon-youxiang
  • 电话
    #icon-dianhua2
  • 护士站
    #icon-hushizhan
  • 护理
    #icon-huli
  • 搜索
    #icon-search
  • 电话
    #icon-dianhua1
  • 评分
    #icon-pingfen
  • 申诉
    #icon-shensu
  • 我的
    #icon-wode2
  • 修改
    #icon-xiugai
  • 维持
    #icon-weichi
  • 撤销
    #icon-chexiao
  • 上报
    #icon-shangbao
  • 已取消
    #icon-yiquxiao
  • 已撤销
    #icon-yichexiao
  • 右箭头
    #icon-youjiantou2
  • 重命名
    #icon-zhongmingming1
  • 申请会诊
    #icon-shenqinghuizhen
  • 急会诊
    #icon-jihuizhen
  • 应邀会诊
    #icon-yingyaohuizhen
  • 审核成功
    #icon-shenhechenggong
  • 搜索框
    #icon-sousuokuang
  • 检验列表
    #icon-jianyanliebiao
  • 列表形式 (1)
    #icon-a-liebiaoxingshi1
  • 列表形式
    #icon-liebiaoxingshi
  • 扬声器
    #icon-yangshengqi
  • 设备-扬声器静音
    #icon-shebei-yangshengqiyinliang
  • 关闭
    #icon-guanbi3
  • 质量
    #icon-zhiliang
  • 16_视频_截图_默认
    #icon-_shipin_jietu_moren
  • 展开收起-上
    #icon-zhankaishouqi-shang
  • 展开收起-下
    #icon-zhankaishouqi-xia
  • 骷髅头-线
    #icon-kuloutou-xian
  • 其他配置
    #icon-qitapeizhi
  • 手术
    #icon-shoushu1
  • 药丸
    #icon-yaowan
  • 住院患者
    #icon-zhuyuanhuanzhe
  • 手术复盘
    #icon-shoushufupan
  • 门诊患者
    #icon-menzhenhuanzhe2
  • 编辑
    #icon-bianji1
  • 分享二维码
    #icon-fenxiangerweima
  • 分享记录
    #icon-fenxiangjilu
  • 随访
    #icon-suifang
  • 关闭
    #icon-guanbi2
  • 分享
    #icon-fenxiang4
  • #icon-cha
  • 文件夹
    #icon-wenjianjia4
  • 新建病例
    #icon-xinjianbingli
  • 关闭
    #icon-guanbi1
  • 添加
    #icon-tianjia2
  • 7
    #icon-a-7
  • 单选
    #icon-danxuan
  • 剪刀_剪刀
    #icon-jiandao_jiandao-copy
  • 仪表盘
    #icon-dashboard-fill
  • 计划
    #icon-jihua
  • 邀请
    #icon-yaoqing
  • 面性病人图标
    #icon-mianxingbingrentubiao
  • #icon-jian1-copy
  • 视频
    #icon-shipin2
  • 视频
    #icon-shipin1
  • 拍照
    #icon-paizhao1
  • 消息
    #icon-xiaoxi1
  • 文件夹
    #icon-wenjianjia3
  • 共享
    #icon-gongxiang2
  • 共享
    #icon-gongxiang1
  • 简洁信息
    #icon-jianjiexinxi
  • 睁眼
    #icon-zhengyan
  • 闭眼
    #icon-biyan
  • 信息更多
    #icon-xinxigengduo
  • 电话
    #icon-dianhua
  • 未收藏
    #icon-weishoucang
  • 播放
    #icon-11
  • 旋转
    #icon-xuanzhuan
  • 图片详情
    #icon-tupianxiangqing
  • OCR
    #icon-OCR
  • 向下
    #icon-xiangxia
  • 向上
    #icon-xiangshang
  • 收起
    #icon-shouqi
  • filter
    #icon-filter
  • 下载
    #icon-xiazai
  • 删除
    #icon-shanchu1
  • 共享
    #icon-gongxiang
  • 重命名
    #icon-zhongmingming
  • 文件移动
    #icon-wenjianyidong
  • 删除
    #icon-shanchu
  • 文档
    #icon-jinlingyingcaiwangtubiao45
  • 视频
    #icon-shipin
  • 多人
    #icon-duoren
  • 列表
    #icon-liebiao1
  • 排序
    #icon-paixu
  • 缩略图
    #icon-suolvetu
  • 视频文件
    #icon-file_type_video
  • 未知文件
    #icon-weizhiwenjian1
  • 文件夹
    #icon-wenjianjia2
  • PDF
    #icon-PDF
  • WORD
    #icon-WORD1
  • 右箭头
    #icon-youjiantou1
  • 消息
    #icon-xiaoxi
  • 设置
    #icon-shezhi1
  • 退出登录电脑
    #icon-tuichudengludiannao
  • 电脑
    #icon-diannao
  • 打钩
    #icon-check-smooth
  • 眼睛
    #icon-yanjing
  • 眼睛
    #icon-yanjing1
  • #icon-gou
  • 拖动位置
    #icon-tuodongweizhi
  • 22-顺序、拖动
    #icon-22-shunxutuodong
  • 更 多
    #icon-gengduo
  • 签到
    #icon-qiandao
  • 国际站_选 中
    #icon-xuanzhong
  • 未 选中 (1)
    #icon-weixuanzhong
  • 已签到
    #icon-yiqiandao
  • 申请
    #icon-shenqing1
  • 二维码
    #icon-qrcode
  • 直播 未选中
    #icon-zhiboweixuanzhong
  • 拨号盘
    #icon-bohaopan
  • 屏幕共享1
    #icon-pingmugongxiang1
  • 菜单
    #icon-caidan
  • 关 闭
    #icon-guanbi
  • 手写签名
    #icon-shouxieqianming
  • 查询中心
    #icon-chaxunzhongxin
  • 上传
    #icon-shangchuan
  • 签名
    #icon-qianming
  • #icon-pen
  • 切换
    #icon-qiehuan
  • 链接
    #icon-lianjie
  • 锁定
    #icon-suoding
  • 定位线
    #icon-dx1
  • 体检
    #icon-tijian
  • 解除锁定
    #icon-jiechusuoding
  • 锁定
    #icon-suoding1
  • 未知文件
    #icon-weizhiwenjian
  • 音频
    #icon-yinpin
  • #icon-xia3
  • #icon-shang2
  • 停止录音
    #icon-tingzhiluyin
  • OCR识别异常记录
    #icon-OCRshibieyichangjilu
  • 拨号
    #icon-bohao
  • 信息 短信 消息 提醒 邮件 私信 邮箱
    #icon-xinxiduanxinxiaoxitixingyoujiansixinyouxiang
  • 转科
    #icon-zhuanke
  • 复制
    #icon-fuzhi
  • 验证码
    #icon-yanzhengma
  • 出院小结
    #icon-icon202
  • 引导箭头
    #icon-yindaojiantou
  • 引导-箭头
    #icon-iconjt
  • 企业微信
    #icon-qiyeweixin
  • 分享
    #icon-fenxiang3
  • 微信
    #icon-weixin2
  • 二维码
    #icon-erweima4
  • 链接
    #icon-Group-1
  • 钉钉
    #icon-dingding
  • 右旋转
    #icon-youxuanzhuan
  • 收 藏
    #icon-shoucang1
  • 摄像头切换
    #icon-fanzhuanjingtou1
  • #icon-xia
  • 更多
    #icon-icon-toolbar-sys-more
  • #icon-little-down
  • 步骤空心圆
    #icon-buzhoukongxinyuan
  • 历史
    #icon-lishi
  • 手术
    #icon-shoushu
  • 暂停
    #icon-zanting
  • 播放
    #icon-bofang
  • 拨打电话
    #icon-dadianhua
  • #icon-left
  • 云盘
    #icon-yunpan
  • 预警灯
    #icon-yujingdeng
  • 医院
    #icon-Exampleofhospital
  • 门诊室
    #icon-menzhenshi
  • 医院
    #icon-yiyuan1
  • 筛选
    #icon-shaixuan
  • 警告
    #icon-jinggao
  • 性别-未知
    #icon-xingbie-weizhi
  • 性别-男
    #icon-iconcle07
  • 性别 女 线性
    #icon-xingbienvxianxing
  • 24顶栏_云盘
    #icon-24dinglanyunpan
  • 申请
    #icon-shenqing
  • 生命线_lifeline13
    #icon-shengmingxian_lifeline
  • 个人资料
    #icon-gerenziliao
  • ico_医生工作站_医嘱管理(新)
    #icon-ico_yishenggongzuozhan_yizhuguanlixin
  • 审核 (1)
    #icon-shenhe1
  • 讨论
    #icon-taolun
  • 讨论
    #icon-taolun1
  • 医嘱
    #icon-yizhu
  • dx
    #icon-dx
  • 检验
    #icon-jianyan
  • 听诊器,诊断,stethoscope
    #icon-stethoscope
  • 文档云盘
    #icon-icon_cloud
  • 资料
    #icon-ziliao
  • 锤子
    #icon-chuizi
  • 成功
    #icon-chenggong
  • 箭头
    #icon-jiantou-copy
  • 箭头
    #icon-jiantou
  • 通知 (1)
    #icon-tongzhi
  • pdf
    #icon-pdf2
  • ppt
    #icon-ppt
  • WORD
    #icon-WORD
  • 上传图片
    #icon-shangchuantupian
  • TEXT
    #icon-TEXT
  • Excel
    #icon-Excel
  • play
    #icon-play
  • #icon-zuo
  • 菜单
    #icon-ego-menu
  • 电子签名约定书
    #icon-dianziqianmingyuedingshu201
  • 列表
    #icon-liebiao
  • 开票申请
    #icon-kaipiaoshenqing
  • 记录
    #icon-jilu
  • pdf
    #icon-pdf1
  • 屏幕共享
    #icon-wendang
  • 开关 开
    #icon-kaiguanclose-copy
  • 开关 开
    #icon-kaiguanclose
  • #icon-you1
  • #icon-xia1
  • 错误
    #icon-cuowu
  • 右三角
    #icon-yousanjiao-copy
  • 右三角
    #icon-yousanjiao
  • 键盘
    #icon-jianpan
  • 加号-01
    #icon-jiahao01
  • 双箭头
    #icon-shuangjiantou
  • 向右
    #icon-unie623
  • 向右
    #icon-unie623-copy
  • 话筒
    #icon-msnui-mic-inverse
  • 音量
    #icon-yinliang
  • 挂断
    #icon-guaduan
  • #icon-ku
  • 翻转镜头
    #icon-fanzhuanjingtou
  • 网络错误
    #icon-wangluocuowu
  • 缩小
    #icon-suoxiao1
  • 相机
    #icon-xiangji1
  • 屏幕全屏
    #icon-pingmuquanping
  • 声音
    #icon-shengyin-copy
  • #icon-jian
  • Artboard Copy 100
    #icon-ArtboardCopy2
  • Artboard Copy 36
    #icon-ArtboardCopy1
  • 我的
    #icon-ArtboardCopy
  • 首页 填充
    #icon-yunyi-tianchong
  • 通讯录_填充
    #icon-tongxunlu_tianchong
  • 消息-填充
    #icon-xiaoxi-tianchong
  • 分享-理财成就
    #icon-fenxianglicaichengjiu
  • 垃圾桶
    #icon-lajitong
  • 日历 日期
    #icon-riliriqi
  • 添加 加号 无边框
    #icon-tianjiajiahaowubiankuang
  • x
    #icon-x-copy
  • 更多 小
    #icon-gengduoxiao
  • 顶部
    #icon-dingbu
  • 更多
    #icon-101
  • 计算器
    #icon-ai-calculator
  • 待办事项-1
    #icon-icon-todo
  • 关于我们
    #icon-moban
  • 微信
    #icon-weixin1
  • 用户访问记录
    #icon-icon
  • 病历
    #icon-shouye
  • 分享
    #icon-fenxiang1
  • 选择
    #icon-xuanze
  • 图片加载失败-02
    #icon-tupianjiazaishibai02
  • 医生
    #icon-yisheng
  • 分享
    #icon-icon_share
  • 右箭头
    #icon-youjiantou
  • 首页
    #icon-shouye1
  • 设置
    #icon-shezhi
  • 摄像
    #icon-ai14
  • 星号
    #icon-jiufuqianbaoicon14
  • 警告
    #icon-wuuiconsuotanhao
  • 信息
    #icon-mes
  • 通讯录
    #icon-tongxunlu
  • 人12
    #icon-ren121
  • 警告
    #icon-warning
  • 添加
    #icon-tianjia1
  • 人12
    #icon-ren12
  • 三角形-up
    #icon-sanjiaoxing-up
  • 二维码
    #icon-erweima1
  • 通讯录
    #icon-tongxunlu1
  • 好房拓 4.0.0 iconfont 2_医院
    #icon-haofangtuo400iconfont2yiyuan
  • 会议
    #icon-huiyi
  • 待办
    #icon-daiban
  • 组织架构
    #icon-zuzhijiagou
  • 医院-2
    #icon-yiyuan-2
  • 二维码
    #icon-erweima3
  • 语音
    #icon-yuyin2
  • #icon-shang1
  • 眼睛-闭
    #icon-yanjing-bi
  • 垃圾桶
    #icon-lajitong1
  • 通讯录
    #icon-tongxunlu2
  • #icon-dui
  • 住院管理
    #icon-zhuyuanguanli
  • pdf
    #icon-pdf
  • 图片
    #icon-tupian
  • 收藏
    #icon-shoucang
  • 生病
    #icon--sick
  • 医疗
    #icon-yiliao
  • 扫一扫
    #icon-saoyisao
  • 医院管理1
    #icon-yiyuanguanli
  • 地图
    #icon-ditu1
  • 添加好友
    #icon-add-friends_icon
  • 目标端
    #icon-aim
  • 语音
    #icon-yuyin
  • 二维码
    #icon-erweima2
  • 信息
    #icon-xinxi
  • 编辑
    #icon-bianji
  • 文件夹
    #icon-wenjianjia
  • 图片
    #icon-tupian1
  • 语音
    #icon-yuyin3
  • 医院资讯-填充
    #icon-yiyuanzixun-tianchong
  • 审核通过
    #icon-shenhetongguo
  • 审批管理
    #icon-shenpiguanli
  • 分享
    #icon-share
  • 用户管理
    #icon-drxx10
  • 睁眼
    #icon-icon-eye-open
  • 印章管理
    #icon-seal
  • 刷新
    #icon-icon--
  • 垃圾桶
    #icon-icon--1
  • 文件夹
    #icon-wenjianjia1
  • 医院
    #icon-yiyuan
  • 医疗宝典
    #icon-yiliaobaodian
  • 搜索
    #icon-sousuo
  • 我的
    #icon-wode
  • 医生
    #icon-yisheng2
  • 远程帮教
    #icon-yuanchengbangjiao
  • 最近来访
    #icon-zuijinlaifang
  • 说明
    #icon-shuoming
  • 014中西医结合微创靶向疗法
    #icon-zhongxiyijieheweichuangbaxiangliaofa
  • 医生
    #icon-yisheng1
  • 最近联系人-im
    #icon-zuijinlianxirenim
  • 分享
    #icon-msnui-share
  • 帮助
    #icon-bangzhu
  • 分享
    #icon-fenxiang
  • 三角下
    #icon-triangle-bottom
  • 节点-统计
    #icon-jiediantongji
  • 病史
    #icon-bingshi
  • 朋友圈
    #icon-pengyouquan
  • 曲线
    #icon-quxian
  • 语音
    #icon-yuyin1
  • 拍照
    #icon-paizhao
  • 后十年 密码
    #icon-mima
  • 二维码
    #icon-erweima
  • 手机
    #icon-shouji-copy
  • 添加
    #icon-tianjia
  • 相机
    #icon-xiangji
  • 地图
    #icon-ditu
  • 对号
    #icon-duihaocheckmark17
  • 中西医结合微创靶向疗法
    #icon-214

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>