• 金额退回疑问详情
    
  • 我的-钱包
    
  • 发起红包
    
  • WorkPlus内通知
    
  • 添加字段
    
  • 通用删除
    
  • 右三角
    
  • 编组 34
    
  • 撤回
    
  • 批量管理
    
  • 键盘
    
  • 电话通知
    
  • 发送语音
    
  • 恢复
    
  • 定时发送
    
  • 添加回复
    
  • 分别发送
    
  • 评论
    
  • 必应消息-入口
    
  • link
    
  • attachment
    
  • icon-notice
    
  • 群公告-喇叭
    
  • 必应详情-回复已读图标
    
  • skin_c_tip_common_circle_tick_unselected
    
  • skin_c_secondary_common_circle_tick
    
  • skin_icf_chat_item_menu_task
    
  • skin_icf_bing_ring
    
  • skin_icf_task_deadline
    
  • skin_icf_task_priority
    
  • skin_icf_task_remind
    
  • skin_icf_task_secret
    
  • skin_icf_task_source
    
  • skin_icf_chat_more_task
    
  • skin_icf_task_done
    
  • 聚餐投票
    
  • 群公告
    
  • 群公告知会人-宝马样式
    
  • 群待办
    
  • 刷新
    
  • skin_icf_nav_work_status
    
  • skin_icf_work_status_custom
    
  • skin_icf_work_status_asleep
    
  • skin_icf_work_status_aquarius
    
  • skin_icf_work_status_aries
    
  • skin_icf_work_status_afterwork
    
  • skin_icf_work_status_drumstick
    
  • skin_icf_work_status_cancer
    
  • skin_icf_work_status_dog
    
  • skin_icf_work_status_overtime
    
  • skin_icf_work_status_leave
    
  • skin_icf_work_status_ox
    
  • skin_icf_work_status_gemini
    
  • skin_icf_work_status_fitness
    
  • skin_icf_work_status_happy
    
  • skin_icf_work_status_dragon
    
  • skin_icf_work_status_capricorn
    
  • skin_icf_work_status_monkey
    
  • skin_icf_work_status_meeting
    
  • skin_icf_work_status_pisces
    
  • skin_icf_work_status_exercise
    
  • skin_icf_work_status_libra
    
  • skin_icf_work_status_pig
    
  • skin_icf_work_status_leo
    
  • skin_icf_work_status_goat
    
  • skin_icf_work_status_field
    
  • skin_icf_work_status_horse
    
  • skin_icf_work_status_rest
    
  • skin_icf_work_status_rooster
    
  • skin_icf_work_status_silence
    
  • skin_icf_work_status_sad
    
  • skin_icf_work_status_sagittarius
    
  • skin_icf_work_status_tiger
    
  • skin_icf_work_status_telecommuting
    
  • skin_icf_work_status_taurus
    
  • skin_icf_work_status_trip
    
  • skin_icf_work_status_rabbit
    
  • skin_icf_work_status_snake
    
  • skin_icf_work_status_vocation
    
  • skin_icf_work_status_rat
    
  • skin_icf_work_status_scorpio
    
  • skin_icf_work_status_virgo
    
  • 编组 270
    
  • 接龙
    
  • 企业互联-添加联系人
    
  • 企业互联
    
  • 门户
    
  • 应用
    
  • 文件-激活
    
  • 发现-未激活
    
  • 文件-未激活
    
  • 发现-激活
    
  • 邮箱-来往邮件
    
  • 预约会议
    
  • 加入会议
    
  • 设置2
    
  • 邮箱-发送邮件
    
  • 邮箱-更多
    
  • 邮箱-写邮件
    
  • 关闭协同
    
  • 启用协同
    
  • 通讯录-已经添加好友
    
  • 通讯录-星标联系人
    
  • 首页-不静音
    
  • 首页-MAC端登录
    
  • 消息置顶
    
  • 日程-全天
    
  • 日程-冲突
    
  • 日程-待选
    
  • 日程-接受选项
    
  • 日程-拒绝选项
    
  • 日程-待定选项
    
  • 日程-更多
    
  • 日程-分享
    
  • 日程-参与者-拒绝
    
  • 日程-删除
    
  • 日程-参与者-接受
    
  • 日程-我可以查看的日程
    
  • 日程-我创建的日程
    
  • 日程-别人邀请我的日程
    
  • 日程-参与者-待定
    
  • 日程-编辑
    
  • 日程-更多选项
    
  • 首页-快捷入口-日程
    
  • 首页-快捷入口-音视频
    
  • 首页-快捷入口-必应
    
  • 首页-会话人静音
    
  • 个人页面-星标
    
  • 工作台-常用应用
    
  • 首页-弹出-传文件
    
  • 工作台-切换工作台
    
  • 工作台-添加工作台
    
  • 工作台-组织管理
    
  • 工作台-管理工作台
    
  • 扫码
    
  • 更多
    
  • 语音视频
    
  • 使用语音
    
  • 编辑
    
  • 删除
    
  • 更多
    
  • 翻译
    
  • 收藏
    
  • PIN
    
  • 引用
    
  • 转发
    
  • 复制
    
  • +
    
  • 语音输入
    
  • 阅后即焚
    
  • 表情
    
  • 搜索
    
  • 点点点
    
  • 键盘
    
  • 手机相册
    
  • 手机文件
    
  • 二维码
    
  • 减去成员
    
  • 添加人员
    
  • 删除字符
    
  • 下载
    
  • 刷新
    
  • 字体大小
    
  • 星形收藏
    
  • 个人页面-添加联系人
    
  • 关闭
    
  • 机器人
    
  • 普通群
    
  • 项目群
    
  • 添加应用
    
  • 我-文档中心
    
  • 我-我的收藏
    
  • 我-反馈意见
    
  • 我-设置
    
  • 我-隐私策略
    
  • 我-公司标识
    
  • 我-我的下载
    
  • 我-投票
    
  • 我-切换组织
    
  • 左上角-返回
    
  • 投票-添加选项
    
  • 投票-删除选项
    
  • 文档中心-筛选
    
  • 文档中心-多选
    
  • 文档中心-传输列表
    
  • 文档中心-更多
    
  • 文档中心-链接无效
    
  • 文档中心-空间大小@2x
    
  • 右上角下拉-创建新组织
    
  • 右上角下拉-申请加入组织
    
  • 登录-问题
    
  • 应用-减项
    
  • 登录-密码
    
  • 登录-账号
    
  • 通讯录-按首拼查找@3x
    
  • 通讯录-通讯录邀请@3x
    
  • 通讯录-我的朋友@3x
    
  • 通讯录-我的群组@3x
    
  • 聊天-@
    
  • 首页-PC端登录
    
  • 智能机器人
    
  • 聊天设置-云同步
    
  • 个人信息-电话
    
  • 聊天-消息发送失败
    
  • WIFI
    
  • 我-邮箱
    
  • 我-VPN
    
  • 我-圈子
    
  • 转发-copy
    
  • 我-积分商城
    
  • 消息功能-扬声器
    
  • 消息功能-已读
    
  • 消息功能-未读
    
  • 消息功能-分享
    
  • 消息功能-语音转文字
    
  • 消息功能-再发一次
    
  • 消息功能-提醒
    
  • 消息功能-历史分享
    
  • 消息功能-重复
    
  • 消息功能-更新文件
    
  • 消息功能-听筒
    
  • 消息功能-总数
    
  • 消息功能-撤回
    
  • 消息功能-文档中心
    
  • 消息功能-网盘
    
  • 首页-即时会议
    
  • 首页-预约会议
    
  • 首页-语音视频
    
  • 服务号-收起列表
    
  • 服务号-弹出键盘
    
  • 服务号-下拉
    
  • 服务号-上拉
    
  • 警告
    
  • 跳转
    
  • 新建必应消息-播放
    
  • 新建必应消息-暂停
    
  • 向下箭头
    
  • 向上箭头
    
  • 向左箭头
    
  • 选择
    
  • 圈圈-选中
    
  • 圈圈
    
  • skin_icf_chat_item_menu_pack_up
    
  • Invite
    
  • Video
    
  • 条形码
    
  • Speaker
    
  • Mute
    
  • Pack Up
    
  • 内部群
    
  • 选择
    
  • 字体
    
  • 编辑
    
  • 锁头
    
  • 工作台-普通-选中
    
  • 工作台-普通
    
  • 我的-普通-选中
    
  • 我的-普通
    
  • 消息-普通
    
  • 应用-普通-选中
    
  • 应用-普通
    
  • 消息-普通-选中
    
  • 通讯录-普通
    
  • 圆圈叉
    
  • 通讯录-普通-选中
    
  • 转发
    
  • 定位
    
  • 新建文件夹
    
  • 复制到该目录
    
  • copy
    
  • 下载细线条
    
  • 三条杠
    
  • 验证-01
    
  • safe
    
  • 模版群
    
  • 群聊
    
  • +
    
  • 必应消息
    
  • 文件
    
  • 网盘
    
  • 拍照
    
  • 必应消息
    
  • 位置
    
  • 小视频
    
  • 语音视频
    
  • 发起会议
    
  • 名片
    
  • 图片
    
  • 个人
    
  • 应用
    
  • 个人-激活
    
  • 应用-激活
    
  • 工作台-激活
    
  • 消息-激活
    
  • 消息
    
  • 通讯录-激活
    
  • 通讯录
    
  • 工作台
    
  • 发起群聊
    
  • 必应消息
    
  • 添加好友
    
  • 音视频
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

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

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

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

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

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

  • 金额退回疑问详情
    .icon_skin_icf_redpacket_refund_inquiry
  • 我的-钱包
    .icon_skin_icf_me_wallet
  • 发起红包
    .icon_skin_icf_redpacket_initiate
  • WorkPlus内通知
    .icon_skin_icf_bing_workplus_notification
  • 添加字段
    .icon_skin_icf_task_add_property
  • 通用删除
    .icon_skin_icf_common_trash
  • 右三角
    .icon_skin_icf_common_triangle_right
  • 编组 34
    .icon_skin_icf_bing_list_voice
  • 撤回
    .icon_skin_icf_bing_recall
  • 批量管理
    .icon_skin_icf_bing_batch_edit
  • 键盘
    .icon_skin_icf_bing_send_text
  • 电话通知
    .icon_skin_icf_bing_vms_notification
  • 发送语音
    .icon_skin_icf_bing_send_voice
  • 恢复
    .icon_skin_icf_common_recall
  • 定时发送
    .icon_skin_icf_bing_send_ontime
  • 添加回复
    .icon_skin_icf_common_comment
  • 分别发送
    .icon_skin_icf_bing_unicast
  • 评论
    .icon_skin_icf_bing_new_comments
  • 必应消息-入口
    .icon_skin_icf_session_bing
  • link
    .icon_skin_icf_bing_link
  • attachment
    .icon_skin_icf_bing_attachment
  • icon-notice
    .icon_skin_icf_group_notice_clock
  • 群公告-喇叭
    .icon_skin_icf_group_notice_horn
  • 必应详情-回复已读图标
    .icon_skin_icf_bing_detail_reply_mind
  • skin_c_tip_common_circle_tick_unselected
    .icon_skin_c_tip_common_circle_tick_unselected
  • skin_c_secondary_common_circle_tick
    .icon_skin_c_secondary_common_circle_tick
  • skin_icf_chat_item_menu_task
    .icon_skin_icf_chat_item_menu_task
  • skin_icf_bing_ring
    .icon_skin_icf_bing_ring
  • skin_icf_task_deadline
    .icon_skin_icf_task_deadline
  • skin_icf_task_priority
    .icon_skin_icf_task_priority
  • skin_icf_task_remind
    .icon_skin_icf_task_remind
  • skin_icf_task_secret
    .icon_skin_icf_task_secret
  • skin_icf_task_source
    .icon_skin_icf_task_source
  • skin_icf_chat_more_task
    .icon_skin_icf_chat_more_task
  • skin_icf_task_done
    .icon_skin_icf_task_done
  • 聚餐投票
    .icon_skin_icf_todo_label_vote
  • 群公告
    .icon_skin_icf_todo_label_discussion_announcement
  • 群公告知会人-宝马样式
    .icon_skin_icf_todo_done_count
  • 群待办
    .icon_skin_icf_chat_item_menu_todo
  • 刷新
    .icon_skin_c_secondary_icf_common_refresh
  • skin_icf_nav_work_status
    .icon_skin_icf_nav_work_status
  • skin_icf_work_status_custom
    .icon_skin_icf_work_status_custom
  • skin_icf_work_status_asleep
    .icon_skin_icf_work_status_asleep
  • skin_icf_work_status_aquarius
    .icon_skin_icf_work_status_aquarius
  • skin_icf_work_status_aries
    .icon_skin_icf_work_status_aries
  • skin_icf_work_status_afterwork
    .icon_skin_icf_work_status_afterwork
  • skin_icf_work_status_drumstick
    .icon_skin_icf_work_status_drumstick
  • skin_icf_work_status_cancer
    .icon_skin_icf_work_status_cancer
  • skin_icf_work_status_dog
    .icon_skin_icf_work_status_dog
  • skin_icf_work_status_overtime
    .icon_skin_icf_work_status_overtime
  • skin_icf_work_status_leave
    .icon_skin_icf_work_status_leave
  • skin_icf_work_status_ox
    .icon_skin_icf_work_status_ox
  • skin_icf_work_status_gemini
    .icon_skin_icf_work_status_gemini
  • skin_icf_work_status_fitness
    .icon_skin_icf_work_status_fitness
  • skin_icf_work_status_happy
    .icon_skin_icf_work_status_happy
  • skin_icf_work_status_dragon
    .icon_skin_icf_work_status_dragon
  • skin_icf_work_status_capricorn
    .icon_skin_icf_work_status_capricorn
  • skin_icf_work_status_monkey
    .icon_skin_icf_work_status_monkey
  • skin_icf_work_status_meeting
    .icon_skin_icf_work_status_meeting
  • skin_icf_work_status_pisces
    .icon_skin_icf_work_status_pisces
  • skin_icf_work_status_exercise
    .icon_skin_icf_work_status_exercise
  • skin_icf_work_status_libra
    .icon_skin_icf_work_status_libra
  • skin_icf_work_status_pig
    .icon_skin_icf_work_status_pig
  • skin_icf_work_status_leo
    .icon_skin_icf_work_status_leo
  • skin_icf_work_status_goat
    .icon_skin_icf_work_status_goat
  • skin_icf_work_status_field
    .icon_skin_icf_work_status_field
  • skin_icf_work_status_horse
    .icon_skin_icf_work_status_horse
  • skin_icf_work_status_rest
    .icon_skin_icf_work_status_rest
  • skin_icf_work_status_rooster
    .icon_skin_icf_work_status_rooster
  • skin_icf_work_status_silence
    .icon_skin_icf_work_status_silence
  • skin_icf_work_status_sad
    .icon_skin_icf_work_status_sad
  • skin_icf_work_status_sagittarius
    .icon_skin_icf_work_status_sagittarius
  • skin_icf_work_status_tiger
    .icon_skin_icf_work_status_tiger
  • skin_icf_work_status_telecommuting
    .icon_skin_icf_work_status_telecommuting
  • skin_icf_work_status_taurus
    .icon_skin_icf_work_status_taurus
  • skin_icf_work_status_trip
    .icon_skin_icf_work_status_trip
  • skin_icf_work_status_rabbit
    .icon_skin_icf_work_status_rabbit
  • skin_icf_work_status_snake
    .icon_skin_icf_work_status_snake
  • skin_icf_work_status_vocation
    .icon_skin_icf_work_status_vocation
  • skin_icf_work_status_rat
    .icon_skin_icf_work_status_rat
  • skin_icf_work_status_scorpio
    .icon_skin_icf_work_status_scorpio
  • skin_icf_work_status_virgo
    .icon_skin_icf_work_status_virgo
  • 编组 270
    .icon_skin_icf_nav_subscription_manage
  • 接龙
    .icon_skin_icf_todo_label_discussion_note
  • 企业互联-添加联系人
    .icon_skin_icf_federation_add_contact
  • 企业互联
    .icon_skin_icf_nav_federation
  • 门户
    .icon_skin_icf_common_workbench
  • 应用
    .icon_skin_icf_common_app
  • 文件-激活
    .icon_skin_icf_tabbar_dc_selected
  • 发现-未激活
    .icon_skin_icf_tabbar_circle_normal
  • 文件-未激活
    .icon_skin_icf_tabbar_dc_normal
  • 发现-激活
    .icon_skin_icf_tabbar_circle_selected
  • 邮箱-来往邮件
    .icon_skin_icf_mail_threads
  • 预约会议
    .icon_skin_icf_chat_more_meeting_reverse
  • 加入会议
    .icon_skin_icf_chat_more_meeting_join
  • 设置2
    .icon_skin_icf_common_setting_2
  • 邮箱-发送邮件
    .icon_skin_icf_mail_send
  • 邮箱-更多
    .icon_skin_icf_common_stripe_more
  • 邮箱-写邮件
    .icon_skin_icf_mail_write
  • 关闭协同
    .icon_skin_icf_dc_inheritance_close
  • 启用协同
    .icon_skin_icf_dc_inheritance_enable
  • 通讯录-已经添加好友
    .icon_skin_icf_friendship_friend
  • 通讯录-星标联系人
    .icon_skin_icf_friendship_star
  • 首页-不静音
    .icon_skin_icf_session_remind
  • 首页-MAC端登录
    .icon_skin_icf_common_mac
  • 消息置顶
    .icon_skin_icf_session_top_flag
  • 日程-全天
    .icon_skin_icf_schedule_full_day
  • 日程-冲突
    .icon_skin_c_accent0_icf_schedule_conflict
  • 日程-待选
    .icon_skin_icf_schedule_unselected
  • 日程-接受选项
    .icon_skin_thick0_icf_schedule_accept
  • 日程-拒绝选项
    .icon_skin_thick0_icf_schedule_reject
  • 日程-待定选项
    .icon_skin_thick0_icf_schedule_undetermined
  • 日程-更多
    .icon_skin_icf_schedule_more1
  • 日程-分享
    .icon_skin_icf_schedule_share
  • 日程-参与者-拒绝
    .icon_skin_c_accent0_thick1_icf_schedule_reject
  • 日程-删除
    .icon_skin_icf_schedule_delete
  • 日程-参与者-接受
    .icon_skin_thick1_icf_schedule_accept
  • 日程-我可以查看的日程
    .icon_skin_icf_schedule_see
  • 日程-我创建的日程
    .icon_skin_icf_schedule_mine
  • 日程-别人邀请我的日程
    .icon_skin_icf_schedule_invite
  • 日程-参与者-待定
    .icon_skin_thick1_icf_schedule_undetermined
  • 日程-编辑
    .icon_skin_icf_schedule_edit
  • 日程-更多选项
    .icon_skin_icf_schedule_more2
  • 首页-快捷入口-日程
    .icon_skin_icf_schedule_entry
  • 首页-快捷入口-音视频
    .icon_skin_icf_common_entry_voices
  • 首页-快捷入口-必应
    .icon_skin_icf_common_entry_bing
  • 首页-会话人静音
    .icon_skin_icf_session_mute
  • 个人页面-星标
    .icon_skin_icf_personal_detail_fav
  • 工作台-常用应用
    .icon_skin_icf_common_appstore
  • 首页-弹出-传文件
    .icon_skin_icf_session_send_file
  • 工作台-切换工作台
    .icon_skin_icf_workbench_switch
  • 工作台-添加工作台
    .icon_skin_icf_workbench_add
  • 工作台-组织管理
    .icon_skin_icf_organization_manage
  • 工作台-管理工作台
    .icon_skin_icf_workbench_manage
  • 扫码
    .icon_skin_icf_nav_scan
  • 更多
    .icon_skin_icf_nav_popup_more
  • 语音视频
    .icon_skin_icf_nav_av
  • 使用语音
    .icon_skin_icf_bing_voice_record
  • 编辑
    .icon_skin_icf_bing_edit
  • 删除
    .icon_skin_c_accent0_icf_chat_item_menu_delete
  • 更多
    .icon_skin_icf_chat_item_menu_more
  • 翻译
    .icon_skin_icf_chat_item_menu_translate
  • 收藏
    .icon_skin_icf_chat_item_menu_favorite
  • PIN
    .icon_skin_icf_chat_item_menu_pin
  • 引用
    .icon_skin_icf_chat_item_menu_quote
  • 转发
    .icon_skin_icf_chat_item_menu_forward
  • 复制
    .icon_skin_icf_chat_item_menu_copy
  • +
    .icon_skin_icf_chat_toolbar_add
  • 语音输入
    .icon_skin_icf_chat_toolbar_voice
  • 阅后即焚
    .icon_skin_icf_chat_toolbar_burn
  • 表情
    .icon_skin_icf_chat_toolbar_expression
  • 搜索
    .icon_skin_c_secondary_text_icf_search
  • 点点点
    .icon_skin_icf_nav_dot_more
  • 键盘
    .icon_skin_icf_chat_toolbar_keyboard
  • 手机相册
    .icon_skin_icf_file_select_photos
  • 手机文件
    .icon_skin_icf_file_select_files
  • 二维码
    .icon_skin_icf_chat_info_qrcode
  • 减去成员
    .icon_skin_icf_chat_info_member_delete
  • 添加人员
    .icon_skin_icf_chat_info_member_add
  • 删除字符
    .icon_skin_icf_chat_input_delete
  • 下载
    .icon_skin_icf_qr_download
  • 刷新
    .icon_skin_icf_common_refresh
  • 字体大小
    .icon_skin_icf_common_font_size
  • 星形收藏
    .icon_skin_icf_personal_detail_unfav
  • 个人页面-添加联系人
    .icon_skin_icf_personal_detail_add_friend
  • 关闭
    .icon_skin_icf_common_close
  • 机器人
    .icon_skin_icf_robot_solid
  • 普通群
    .icon_skin_icf_create_normal_group
  • 项目群
    .icon_skin_icf_create_project_group
  • 添加应用
    .icon_skin_icf_add_apps
  • 我-文档中心
    .icon_skin_icf_me_dc
  • 我-我的收藏
    .icon_skin_icf_me_favorite
  • 我-反馈意见
    .icon_skin_icf_me_feedback
  • 我-设置
    .icon_skin_icf_common_setting
  • 我-隐私策略
    .icon_skin_icf_me_privacy_policy
  • 我-公司标识
    .icon_skin_icf_me_org
  • 我-我的下载
    .icon_skin_icf_me_download
  • 我-投票
    .icon_skin_icf_me_vote
  • 我-切换组织
    .icon_skin_icf_common_switch_org
  • 左上角-返回
    .icon_skin_icf_nav_back
  • 投票-添加选项
    .icon_skin_icf_common_add
  • 投票-删除选项
    .icon_skin_c_accent0_icf_common_delete1
  • 文档中心-筛选
    .icon_skin_icf_dc_screening
  • 文档中心-多选
    .icon_skin_icf_dc_multi_select
  • 文档中心-传输列表
    .icon_skin_icf_dc_transmission
  • 文档中心-更多
    .icon_skin_icf_dc_item_more
  • 文档中心-链接无效
    .icon_skin_icf_dc_invalid_link
  • 文档中心-空间大小@2x
    .icon_skin_icf_dc_capacity
  • 右上角下拉-创建新组织
    .icon_skin_icf_nav_create_org
  • 右上角下拉-申请加入组织
    .icon_skin_icf_nav_join_org
  • 登录-问题
    .icon_skin_icf_login_problem
  • 应用-减项
    .icon_skin_c_accent0_icf_common_delete
  • 登录-密码
    .icon_skin_icf_login_password
  • 登录-账号
    .icon_skin_icf_login_username
  • 通讯录-按首拼查找@3x
    .icon_skin_c_secondary_icf_bg_index_view
  • 通讯录-通讯录邀请@3x
    .icon_skin_c_secondary_icf_contact_invite
  • 通讯录-我的朋友@3x
    .icon_skin_c_secondary_icf_contact_my_friend
  • 通讯录-我的群组@3x
    .icon_skin_icf_contact_my_discussion
  • 聊天-@
    .icon_skin_icf_chat_at
  • 首页-PC端登录
    .icon_skin_icf_common_pc
  • 智能机器人
    .icon_skin_icf_robot
  • 聊天设置-云同步
    .icon_skin_c_secondary_icf_chat_info_roaming
  • 个人信息-电话
    .icon_skin_icf_common_phone
  • 聊天-消息发送失败
    .icon_skin_c_accent0_icf_common_warn
  • WIFI
    .icon_skin_icf_common_wifi
  • 我-邮箱
    .icon_skin_icf_me_email
  • 我-VPN
    .icon_skin_icf_me_vpn
  • 我-圈子
    .icon_skin_icf_me_circle
  • 转发-copy
    .icon_skin_icf_common_forward
  • 我-积分商城
    .icon_skin_icf_me_integral
  • 消息功能-扬声器
    .icon_skin_icf_chat_item_menu_speaker
  • 消息功能-已读
    .icon_skin_icf_chat_item_menu_read
  • 消息功能-未读
    .icon_skin_icf_chat_item_menu_unread
  • 消息功能-分享
    .icon_skin_icf_chat_item_menu_share
  • 消息功能-语音转文字
    .icon_skin_icf_chat_item_menu_voice_to_text
  • 消息功能-再发一次
    .icon_skin_icf_chat_item_menu_resend
  • 消息功能-提醒
    .icon_skin_icf_chat_item_menu_remind
  • 消息功能-历史分享
    .icon_skin_icf_doc_item_menu_history_share
  • 消息功能-重复
    .icon_skin_icf_chat_item_menu_repeat
  • 消息功能-更新文件
    .icon_skin_icf_doc_item_menu_update_file
  • 消息功能-听筒
    .icon_skin_icf_chat_item_menu_earphone
  • 消息功能-总数
    .icon_skin_icf_chat_item_menu_msg_count
  • 消息功能-撤回
    .icon_skin_icf_chat_item_menu_undo
  • 消息功能-文档中心
    .icon_skin_icf_chat_item_menu_doc
  • 消息功能-网盘
    .icon_skin_icf_chat_item_menu_dropbox
  • 首页-即时会议
    .icon_skin_icf_common_instant_meeting
  • 首页-预约会议
    .icon_skin_icf_common_appointment_meeting
  • 首页-语音视频
    .icon_skin_icf_common_meeting
  • 服务号-收起列表
    .icon_skin_icf_chat_toolbar_keyboard_down
  • 服务号-弹出键盘
    .icon_skin_icf_chat_toolbar_keyboard_up
  • 服务号-下拉
    .icon_skin_icf_common_triangle_down
  • 服务号-上拉
    .icon_skin_icf_common_triangle_up
  • 警告
    .icon_skin_c_accent0_icf_common_triangle_warn
  • 跳转
    .icon_skin_c_icf_secondary_common_right_arrow
  • 新建必应消息-播放
    .icon_skin_icf_bing_voice_pause
  • 新建必应消息-暂停
    .icon_skin_icf_bing_voice_play
  • 向下箭头
    .icon_skin_c_icf_secondary_common_down_arrow
  • 向上箭头
    .icon_skin_c_icf_secondary_common_up_arrow
  • 向左箭头
    .icon_skin_c_icf_secondary_common_left_arrow
  • 选择
    .icon_skin_c_secondary_icf_common_tick
  • 圈圈-选中
    .icon_skin_icf_common_circle_selected
  • 圈圈
    .icon_skin_icf_common_circle
  • skin_icf_chat_item_menu_pack_up
    .icon_skin_icf_chat_item_menu_pack_up
  • Invite
    .icon_skin_icf_voip_common_invite
  • Video
    .icon_skin_icf_voip_common_video
  • 条形码
    .icon_skin_icf_scan_barcode
  • Speaker
    .icon_skin_icf_voip_common_speaker
  • Mute
    .icon_skin_icf_voip_common_mute
  • Pack Up
    .icon_skin_icf_voip_minimize
  • 内部群
    .icon_skin_icf_common_internal_discussion
  • 选择
    .icon_skin_icf_image_edit_picked
  • 字体
    .icon_skin_icf_common_letter_a
  • 编辑
    .icon_skin_icf_image_edit_modify
  • 锁头
    .icon_skin_icf_common_locks
  • 工作台-普通-选中
    .icon_skin_icf_common_workbench_selected
  • 工作台-普通
    .icon_skin_icf_common_workbench_normal
  • 我的-普通-选中
    .icon_skin_icf_common_me_selected
  • 我的-普通
    .icon_skin_icf_common_me_normal
  • 消息-普通
    .icon_skin_icf_common_message_normal
  • 应用-普通-选中
    .icon_skin_icf_common_app_selected
  • 应用-普通
    .icon_skin_icf_common_app_normal
  • 消息-普通-选中
    .icon_skin_icf_common_message_selected
  • 通讯录-普通
    .icon_skin_icf_common_contact_normal
  • 圆圈叉
    .icon_skin_icf_common_circle_roundx
  • 通讯录-普通-选中
    .icon_skin_icf_common_contact_selected
  • 转发
    .icon_skin_icf_chat_item_menu_forward_solid
  • 定位
    .icon_skin_icf_common_location
  • 新建文件夹
    .icon_skin_icf_dc_mkdir
  • 复制到该目录
    .icon_skin_icf_dc_copy_to_dir
  • copy
    .icon_skin_icf_copy_solid
  • 下载细线条
    .icon_skin_icf_common_download_slim
  • 三条杠
    .icon_skin_icf_common_sort_more
  • 验证-01
    .icon_skin_icf_common_security
  • safe
    .icon_skin_icf_safe_privacy
  • 模版群
    .icon_skin_icf_discussion_template_0
  • 群聊
    .icon_skin_icf_discussion_common
  • +
    .icon_skin_icf_chat_toolbar_add_rotate
  • 必应消息
    .icon_skin_icf_nav_bing-copy
  • 文件
    .icon_skin_icf_chat_more_file
  • 网盘
    .icon_skin_icf_chat_more_dropbox
  • 拍照
    .icon_skin_icf_chat_more_photograph
  • 必应消息
    .icon_skin_icf_chat_more_bing
  • 位置
    .icon_skin_icf_chat_more_location
  • 小视频
    .icon_skin_icf_chat_more_video
  • 语音视频
    .icon_skin_icf_chat_more_video1
  • 发起会议
    .icon_skin_icf_chat_more_meeting
  • 名片
    .icon_skin_icf_chat_more_business_card
  • 图片
    .icon_skin_icf_chat_more_image
  • 个人
    .icon_skin_icf_tabbar_me_normal
  • 应用
    .icon_skin_icf_tabbar_app_normal
  • 个人-激活
    .icon_skin_icf_tabbar_me_selected
  • 应用-激活
    .icon_skin_icf_tabbar_app_selected
  • 工作台-激活
    .icon_skin_icf_tabbar_workbench_selected
  • 消息-激活
    .icon_skin_icf_tabbar_message_selected
  • 消息
    .icon_skin_icf_tabbar_message_normal
  • 通讯录-激活
    .icon_skin_icf_tabbar_contact_selected
  • 通讯录
    .icon_skin_icf_tabbar_contact_normal
  • 工作台
    .icon_skin_icf_tabbar_workbench_normal
  • 发起群聊
    .icon_skin_icf_nav_create_group
  • 必应消息
    .icon_skin_icf_nav_bing
  • 添加好友
    .icon_skin_icf_nav_add_friend
  • 音视频
    .icon_skin_icf_nav_meeting

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="skin_icf icon_xxx"></span>

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

  • 金额退回疑问详情
    #icon_skin_icf_redpacket_refund_inquiry
  • 我的-钱包
    #icon_skin_icf_me_wallet
  • 发起红包
    #icon_skin_icf_redpacket_initiate
  • WorkPlus内通知
    #icon_skin_icf_bing_workplus_notification
  • 添加字段
    #icon_skin_icf_task_add_property
  • 通用删除
    #icon_skin_icf_common_trash
  • 右三角
    #icon_skin_icf_common_triangle_right
  • 编组 34
    #icon_skin_icf_bing_list_voice
  • 撤回
    #icon_skin_icf_bing_recall
  • 批量管理
    #icon_skin_icf_bing_batch_edit
  • 键盘
    #icon_skin_icf_bing_send_text
  • 电话通知
    #icon_skin_icf_bing_vms_notification
  • 发送语音
    #icon_skin_icf_bing_send_voice
  • 恢复
    #icon_skin_icf_common_recall
  • 定时发送
    #icon_skin_icf_bing_send_ontime
  • 添加回复
    #icon_skin_icf_common_comment
  • 分别发送
    #icon_skin_icf_bing_unicast
  • 评论
    #icon_skin_icf_bing_new_comments
  • 必应消息-入口
    #icon_skin_icf_session_bing
  • link
    #icon_skin_icf_bing_link
  • attachment
    #icon_skin_icf_bing_attachment
  • icon-notice
    #icon_skin_icf_group_notice_clock
  • 群公告-喇叭
    #icon_skin_icf_group_notice_horn
  • 必应详情-回复已读图标
    #icon_skin_icf_bing_detail_reply_mind
  • skin_c_tip_common_circle_tick_unselected
    #icon_skin_c_tip_common_circle_tick_unselected
  • skin_c_secondary_common_circle_tick
    #icon_skin_c_secondary_common_circle_tick
  • skin_icf_chat_item_menu_task
    #icon_skin_icf_chat_item_menu_task
  • skin_icf_bing_ring
    #icon_skin_icf_bing_ring
  • skin_icf_task_deadline
    #icon_skin_icf_task_deadline
  • skin_icf_task_priority
    #icon_skin_icf_task_priority
  • skin_icf_task_remind
    #icon_skin_icf_task_remind
  • skin_icf_task_secret
    #icon_skin_icf_task_secret
  • skin_icf_task_source
    #icon_skin_icf_task_source
  • skin_icf_chat_more_task
    #icon_skin_icf_chat_more_task
  • skin_icf_task_done
    #icon_skin_icf_task_done
  • 聚餐投票
    #icon_skin_icf_todo_label_vote
  • 群公告
    #icon_skin_icf_todo_label_discussion_announcement
  • 群公告知会人-宝马样式
    #icon_skin_icf_todo_done_count
  • 群待办
    #icon_skin_icf_chat_item_menu_todo
  • 刷新
    #icon_skin_c_secondary_icf_common_refresh
  • skin_icf_nav_work_status
    #icon_skin_icf_nav_work_status
  • skin_icf_work_status_custom
    #icon_skin_icf_work_status_custom
  • skin_icf_work_status_asleep
    #icon_skin_icf_work_status_asleep
  • skin_icf_work_status_aquarius
    #icon_skin_icf_work_status_aquarius
  • skin_icf_work_status_aries
    #icon_skin_icf_work_status_aries
  • skin_icf_work_status_afterwork
    #icon_skin_icf_work_status_afterwork
  • skin_icf_work_status_drumstick
    #icon_skin_icf_work_status_drumstick
  • skin_icf_work_status_cancer
    #icon_skin_icf_work_status_cancer
  • skin_icf_work_status_dog
    #icon_skin_icf_work_status_dog
  • skin_icf_work_status_overtime
    #icon_skin_icf_work_status_overtime
  • skin_icf_work_status_leave
    #icon_skin_icf_work_status_leave
  • skin_icf_work_status_ox
    #icon_skin_icf_work_status_ox
  • skin_icf_work_status_gemini
    #icon_skin_icf_work_status_gemini
  • skin_icf_work_status_fitness
    #icon_skin_icf_work_status_fitness
  • skin_icf_work_status_happy
    #icon_skin_icf_work_status_happy
  • skin_icf_work_status_dragon
    #icon_skin_icf_work_status_dragon
  • skin_icf_work_status_capricorn
    #icon_skin_icf_work_status_capricorn
  • skin_icf_work_status_monkey
    #icon_skin_icf_work_status_monkey
  • skin_icf_work_status_meeting
    #icon_skin_icf_work_status_meeting
  • skin_icf_work_status_pisces
    #icon_skin_icf_work_status_pisces
  • skin_icf_work_status_exercise
    #icon_skin_icf_work_status_exercise
  • skin_icf_work_status_libra
    #icon_skin_icf_work_status_libra
  • skin_icf_work_status_pig
    #icon_skin_icf_work_status_pig
  • skin_icf_work_status_leo
    #icon_skin_icf_work_status_leo
  • skin_icf_work_status_goat
    #icon_skin_icf_work_status_goat
  • skin_icf_work_status_field
    #icon_skin_icf_work_status_field
  • skin_icf_work_status_horse
    #icon_skin_icf_work_status_horse
  • skin_icf_work_status_rest
    #icon_skin_icf_work_status_rest
  • skin_icf_work_status_rooster
    #icon_skin_icf_work_status_rooster
  • skin_icf_work_status_silence
    #icon_skin_icf_work_status_silence
  • skin_icf_work_status_sad
    #icon_skin_icf_work_status_sad
  • skin_icf_work_status_sagittarius
    #icon_skin_icf_work_status_sagittarius
  • skin_icf_work_status_tiger
    #icon_skin_icf_work_status_tiger
  • skin_icf_work_status_telecommuting
    #icon_skin_icf_work_status_telecommuting
  • skin_icf_work_status_taurus
    #icon_skin_icf_work_status_taurus
  • skin_icf_work_status_trip
    #icon_skin_icf_work_status_trip
  • skin_icf_work_status_rabbit
    #icon_skin_icf_work_status_rabbit
  • skin_icf_work_status_snake
    #icon_skin_icf_work_status_snake
  • skin_icf_work_status_vocation
    #icon_skin_icf_work_status_vocation
  • skin_icf_work_status_rat
    #icon_skin_icf_work_status_rat
  • skin_icf_work_status_scorpio
    #icon_skin_icf_work_status_scorpio
  • skin_icf_work_status_virgo
    #icon_skin_icf_work_status_virgo
  • 编组 270
    #icon_skin_icf_nav_subscription_manage
  • 接龙
    #icon_skin_icf_todo_label_discussion_note
  • 企业互联-添加联系人
    #icon_skin_icf_federation_add_contact
  • 企业互联
    #icon_skin_icf_nav_federation
  • 门户
    #icon_skin_icf_common_workbench
  • 应用
    #icon_skin_icf_common_app
  • 文件-激活
    #icon_skin_icf_tabbar_dc_selected
  • 发现-未激活
    #icon_skin_icf_tabbar_circle_normal
  • 文件-未激活
    #icon_skin_icf_tabbar_dc_normal
  • 发现-激活
    #icon_skin_icf_tabbar_circle_selected
  • 邮箱-来往邮件
    #icon_skin_icf_mail_threads
  • 预约会议
    #icon_skin_icf_chat_more_meeting_reverse
  • 加入会议
    #icon_skin_icf_chat_more_meeting_join
  • 设置2
    #icon_skin_icf_common_setting_2
  • 邮箱-发送邮件
    #icon_skin_icf_mail_send
  • 邮箱-更多
    #icon_skin_icf_common_stripe_more
  • 邮箱-写邮件
    #icon_skin_icf_mail_write
  • 关闭协同
    #icon_skin_icf_dc_inheritance_close
  • 启用协同
    #icon_skin_icf_dc_inheritance_enable
  • 通讯录-已经添加好友
    #icon_skin_icf_friendship_friend
  • 通讯录-星标联系人
    #icon_skin_icf_friendship_star
  • 首页-不静音
    #icon_skin_icf_session_remind
  • 首页-MAC端登录
    #icon_skin_icf_common_mac
  • 消息置顶
    #icon_skin_icf_session_top_flag
  • 日程-全天
    #icon_skin_icf_schedule_full_day
  • 日程-冲突
    #icon_skin_c_accent0_icf_schedule_conflict
  • 日程-待选
    #icon_skin_icf_schedule_unselected
  • 日程-接受选项
    #icon_skin_thick0_icf_schedule_accept
  • 日程-拒绝选项
    #icon_skin_thick0_icf_schedule_reject
  • 日程-待定选项
    #icon_skin_thick0_icf_schedule_undetermined
  • 日程-更多
    #icon_skin_icf_schedule_more1
  • 日程-分享
    #icon_skin_icf_schedule_share
  • 日程-参与者-拒绝
    #icon_skin_c_accent0_thick1_icf_schedule_reject
  • 日程-删除
    #icon_skin_icf_schedule_delete
  • 日程-参与者-接受
    #icon_skin_thick1_icf_schedule_accept
  • 日程-我可以查看的日程
    #icon_skin_icf_schedule_see
  • 日程-我创建的日程
    #icon_skin_icf_schedule_mine
  • 日程-别人邀请我的日程
    #icon_skin_icf_schedule_invite
  • 日程-参与者-待定
    #icon_skin_thick1_icf_schedule_undetermined
  • 日程-编辑
    #icon_skin_icf_schedule_edit
  • 日程-更多选项
    #icon_skin_icf_schedule_more2
  • 首页-快捷入口-日程
    #icon_skin_icf_schedule_entry
  • 首页-快捷入口-音视频
    #icon_skin_icf_common_entry_voices
  • 首页-快捷入口-必应
    #icon_skin_icf_common_entry_bing
  • 首页-会话人静音
    #icon_skin_icf_session_mute
  • 个人页面-星标
    #icon_skin_icf_personal_detail_fav
  • 工作台-常用应用
    #icon_skin_icf_common_appstore
  • 首页-弹出-传文件
    #icon_skin_icf_session_send_file
  • 工作台-切换工作台
    #icon_skin_icf_workbench_switch
  • 工作台-添加工作台
    #icon_skin_icf_workbench_add
  • 工作台-组织管理
    #icon_skin_icf_organization_manage
  • 工作台-管理工作台
    #icon_skin_icf_workbench_manage
  • 扫码
    #icon_skin_icf_nav_scan
  • 更多
    #icon_skin_icf_nav_popup_more
  • 语音视频
    #icon_skin_icf_nav_av
  • 使用语音
    #icon_skin_icf_bing_voice_record
  • 编辑
    #icon_skin_icf_bing_edit
  • 删除
    #icon_skin_c_accent0_icf_chat_item_menu_delete
  • 更多
    #icon_skin_icf_chat_item_menu_more
  • 翻译
    #icon_skin_icf_chat_item_menu_translate
  • 收藏
    #icon_skin_icf_chat_item_menu_favorite
  • PIN
    #icon_skin_icf_chat_item_menu_pin
  • 引用
    #icon_skin_icf_chat_item_menu_quote
  • 转发
    #icon_skin_icf_chat_item_menu_forward
  • 复制
    #icon_skin_icf_chat_item_menu_copy
  • +
    #icon_skin_icf_chat_toolbar_add
  • 语音输入
    #icon_skin_icf_chat_toolbar_voice
  • 阅后即焚
    #icon_skin_icf_chat_toolbar_burn
  • 表情
    #icon_skin_icf_chat_toolbar_expression
  • 搜索
    #icon_skin_c_secondary_text_icf_search
  • 点点点
    #icon_skin_icf_nav_dot_more
  • 键盘
    #icon_skin_icf_chat_toolbar_keyboard
  • 手机相册
    #icon_skin_icf_file_select_photos
  • 手机文件
    #icon_skin_icf_file_select_files
  • 二维码
    #icon_skin_icf_chat_info_qrcode
  • 减去成员
    #icon_skin_icf_chat_info_member_delete
  • 添加人员
    #icon_skin_icf_chat_info_member_add
  • 删除字符
    #icon_skin_icf_chat_input_delete
  • 下载
    #icon_skin_icf_qr_download
  • 刷新
    #icon_skin_icf_common_refresh
  • 字体大小
    #icon_skin_icf_common_font_size
  • 星形收藏
    #icon_skin_icf_personal_detail_unfav
  • 个人页面-添加联系人
    #icon_skin_icf_personal_detail_add_friend
  • 关闭
    #icon_skin_icf_common_close
  • 机器人
    #icon_skin_icf_robot_solid
  • 普通群
    #icon_skin_icf_create_normal_group
  • 项目群
    #icon_skin_icf_create_project_group
  • 添加应用
    #icon_skin_icf_add_apps
  • 我-文档中心
    #icon_skin_icf_me_dc
  • 我-我的收藏
    #icon_skin_icf_me_favorite
  • 我-反馈意见
    #icon_skin_icf_me_feedback
  • 我-设置
    #icon_skin_icf_common_setting
  • 我-隐私策略
    #icon_skin_icf_me_privacy_policy
  • 我-公司标识
    #icon_skin_icf_me_org
  • 我-我的下载
    #icon_skin_icf_me_download
  • 我-投票
    #icon_skin_icf_me_vote
  • 我-切换组织
    #icon_skin_icf_common_switch_org
  • 左上角-返回
    #icon_skin_icf_nav_back
  • 投票-添加选项
    #icon_skin_icf_common_add
  • 投票-删除选项
    #icon_skin_c_accent0_icf_common_delete1
  • 文档中心-筛选
    #icon_skin_icf_dc_screening
  • 文档中心-多选
    #icon_skin_icf_dc_multi_select
  • 文档中心-传输列表
    #icon_skin_icf_dc_transmission
  • 文档中心-更多
    #icon_skin_icf_dc_item_more
  • 文档中心-链接无效
    #icon_skin_icf_dc_invalid_link
  • 文档中心-空间大小@2x
    #icon_skin_icf_dc_capacity
  • 右上角下拉-创建新组织
    #icon_skin_icf_nav_create_org
  • 右上角下拉-申请加入组织
    #icon_skin_icf_nav_join_org
  • 登录-问题
    #icon_skin_icf_login_problem
  • 应用-减项
    #icon_skin_c_accent0_icf_common_delete
  • 登录-密码
    #icon_skin_icf_login_password
  • 登录-账号
    #icon_skin_icf_login_username
  • 通讯录-按首拼查找@3x
    #icon_skin_c_secondary_icf_bg_index_view
  • 通讯录-通讯录邀请@3x
    #icon_skin_c_secondary_icf_contact_invite
  • 通讯录-我的朋友@3x
    #icon_skin_c_secondary_icf_contact_my_friend
  • 通讯录-我的群组@3x
    #icon_skin_icf_contact_my_discussion
  • 聊天-@
    #icon_skin_icf_chat_at
  • 首页-PC端登录
    #icon_skin_icf_common_pc
  • 智能机器人
    #icon_skin_icf_robot
  • 聊天设置-云同步
    #icon_skin_c_secondary_icf_chat_info_roaming
  • 个人信息-电话
    #icon_skin_icf_common_phone
  • 聊天-消息发送失败
    #icon_skin_c_accent0_icf_common_warn
  • WIFI
    #icon_skin_icf_common_wifi
  • 我-邮箱
    #icon_skin_icf_me_email
  • 我-VPN
    #icon_skin_icf_me_vpn
  • 我-圈子
    #icon_skin_icf_me_circle
  • 转发-copy
    #icon_skin_icf_common_forward
  • 我-积分商城
    #icon_skin_icf_me_integral
  • 消息功能-扬声器
    #icon_skin_icf_chat_item_menu_speaker
  • 消息功能-已读
    #icon_skin_icf_chat_item_menu_read
  • 消息功能-未读
    #icon_skin_icf_chat_item_menu_unread
  • 消息功能-分享
    #icon_skin_icf_chat_item_menu_share
  • 消息功能-语音转文字
    #icon_skin_icf_chat_item_menu_voice_to_text
  • 消息功能-再发一次
    #icon_skin_icf_chat_item_menu_resend
  • 消息功能-提醒
    #icon_skin_icf_chat_item_menu_remind
  • 消息功能-历史分享
    #icon_skin_icf_doc_item_menu_history_share
  • 消息功能-重复
    #icon_skin_icf_chat_item_menu_repeat
  • 消息功能-更新文件
    #icon_skin_icf_doc_item_menu_update_file
  • 消息功能-听筒
    #icon_skin_icf_chat_item_menu_earphone
  • 消息功能-总数
    #icon_skin_icf_chat_item_menu_msg_count
  • 消息功能-撤回
    #icon_skin_icf_chat_item_menu_undo
  • 消息功能-文档中心
    #icon_skin_icf_chat_item_menu_doc
  • 消息功能-网盘
    #icon_skin_icf_chat_item_menu_dropbox
  • 首页-即时会议
    #icon_skin_icf_common_instant_meeting
  • 首页-预约会议
    #icon_skin_icf_common_appointment_meeting
  • 首页-语音视频
    #icon_skin_icf_common_meeting
  • 服务号-收起列表
    #icon_skin_icf_chat_toolbar_keyboard_down
  • 服务号-弹出键盘
    #icon_skin_icf_chat_toolbar_keyboard_up
  • 服务号-下拉
    #icon_skin_icf_common_triangle_down
  • 服务号-上拉
    #icon_skin_icf_common_triangle_up
  • 警告
    #icon_skin_c_accent0_icf_common_triangle_warn
  • 跳转
    #icon_skin_c_icf_secondary_common_right_arrow
  • 新建必应消息-播放
    #icon_skin_icf_bing_voice_pause
  • 新建必应消息-暂停
    #icon_skin_icf_bing_voice_play
  • 向下箭头
    #icon_skin_c_icf_secondary_common_down_arrow
  • 向上箭头
    #icon_skin_c_icf_secondary_common_up_arrow
  • 向左箭头
    #icon_skin_c_icf_secondary_common_left_arrow
  • 选择
    #icon_skin_c_secondary_icf_common_tick
  • 圈圈-选中
    #icon_skin_icf_common_circle_selected
  • 圈圈
    #icon_skin_icf_common_circle
  • skin_icf_chat_item_menu_pack_up
    #icon_skin_icf_chat_item_menu_pack_up
  • Invite
    #icon_skin_icf_voip_common_invite
  • Video
    #icon_skin_icf_voip_common_video
  • 条形码
    #icon_skin_icf_scan_barcode
  • Speaker
    #icon_skin_icf_voip_common_speaker
  • Mute
    #icon_skin_icf_voip_common_mute
  • Pack Up
    #icon_skin_icf_voip_minimize
  • 内部群
    #icon_skin_icf_common_internal_discussion
  • 选择
    #icon_skin_icf_image_edit_picked
  • 字体
    #icon_skin_icf_common_letter_a
  • 编辑
    #icon_skin_icf_image_edit_modify
  • 锁头
    #icon_skin_icf_common_locks
  • 工作台-普通-选中
    #icon_skin_icf_common_workbench_selected
  • 工作台-普通
    #icon_skin_icf_common_workbench_normal
  • 我的-普通-选中
    #icon_skin_icf_common_me_selected
  • 我的-普通
    #icon_skin_icf_common_me_normal
  • 消息-普通
    #icon_skin_icf_common_message_normal
  • 应用-普通-选中
    #icon_skin_icf_common_app_selected
  • 应用-普通
    #icon_skin_icf_common_app_normal
  • 消息-普通-选中
    #icon_skin_icf_common_message_selected
  • 通讯录-普通
    #icon_skin_icf_common_contact_normal
  • 圆圈叉
    #icon_skin_icf_common_circle_roundx
  • 通讯录-普通-选中
    #icon_skin_icf_common_contact_selected
  • 转发
    #icon_skin_icf_chat_item_menu_forward_solid
  • 定位
    #icon_skin_icf_common_location
  • 新建文件夹
    #icon_skin_icf_dc_mkdir
  • 复制到该目录
    #icon_skin_icf_dc_copy_to_dir
  • copy
    #icon_skin_icf_copy_solid
  • 下载细线条
    #icon_skin_icf_common_download_slim
  • 三条杠
    #icon_skin_icf_common_sort_more
  • 验证-01
    #icon_skin_icf_common_security
  • safe
    #icon_skin_icf_safe_privacy
  • 模版群
    #icon_skin_icf_discussion_template_0
  • 群聊
    #icon_skin_icf_discussion_common
  • +
    #icon_skin_icf_chat_toolbar_add_rotate
  • 必应消息
    #icon_skin_icf_nav_bing-copy
  • 文件
    #icon_skin_icf_chat_more_file
  • 网盘
    #icon_skin_icf_chat_more_dropbox
  • 拍照
    #icon_skin_icf_chat_more_photograph
  • 必应消息
    #icon_skin_icf_chat_more_bing
  • 位置
    #icon_skin_icf_chat_more_location
  • 小视频
    #icon_skin_icf_chat_more_video
  • 语音视频
    #icon_skin_icf_chat_more_video1
  • 发起会议
    #icon_skin_icf_chat_more_meeting
  • 名片
    #icon_skin_icf_chat_more_business_card
  • 图片
    #icon_skin_icf_chat_more_image
  • 个人
    #icon_skin_icf_tabbar_me_normal
  • 应用
    #icon_skin_icf_tabbar_app_normal
  • 个人-激活
    #icon_skin_icf_tabbar_me_selected
  • 应用-激活
    #icon_skin_icf_tabbar_app_selected
  • 工作台-激活
    #icon_skin_icf_tabbar_workbench_selected
  • 消息-激活
    #icon_skin_icf_tabbar_message_selected
  • 消息
    #icon_skin_icf_tabbar_message_normal
  • 通讯录-激活
    #icon_skin_icf_tabbar_contact_selected
  • 通讯录
    #icon_skin_icf_tabbar_contact_normal
  • 工作台
    #icon_skin_icf_tabbar_workbench_normal
  • 发起群聊
    #icon_skin_icf_nav_create_group
  • 必应消息
    #icon_skin_icf_nav_bing
  • 添加好友
    #icon_skin_icf_nav_add_friend
  • 音视频
    #icon_skin_icf_nav_meeting

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>