IconFont 图标
-
微信#icon-weixin
-
更多#icon-more-1
-
QQ#icon-qq
-
微博#icon-unie61d
-
qzone#icon-qzone
-
二维码#icon-erweima
-
收藏_已收藏#icon-collect
-
圆形选中#icon-checkbox
-
删除#icon-delete
-
下载#icon-xiazai
-
全屏#icon-full
-
设置#icon-set
-
报销申请#icon-expenses
-
LOGO#icon-logo
-
CRM#icon-crm
-
办公参数#icon-office-params
-
产品#icon-products
-
公司管理#icon-com-manage
-
采购#icon-purchase
-
后台#icon-admin
-
角色权限#icon-roles
-
竞争对手#icon-powers
-
联系人#icon-contacts
-
客户#icon-clients
-
工作报告#icon-reports
-
设置#icon-settings
-
审批#icon-approvals
-
日程#icon-schedules
-
商机#icon-biz
-
市场活动#icon-markets
-
任务#icon-tasks
-
收起全屏#icon-refull
-
收起菜单#icon-d-arrow-left
-
首页#icon-home
-
数据管理#icon-dm
-
统计分析#icon-analysis
-
同事圈#icon-friends
-
下拉#icon-e-dropdown
-
线索#icon-clues
-
下拉选中#icon-s-dropdown
-
销售参数#icon-params
-
仪表盘#icon-dashboard
-
销售字段#icon-field
-
协同办公#icon-teamwork
-
销售预测#icon-forecast
-
邮件管理#icon-email-settings
-
销售目标#icon-targets
-
知识库#icon-knowledge
-
账号信息#icon-account-info
-
展开菜单#icon-ex-menu
-
编辑#icon-edit
-
播放#icon-play
-
编辑-1#icon-text-edit
-
草稿邮件#icon-email-draft
-
出差申请#icon-trip
-
定时邮件#icon-timing-email
-
打印#icon-print
-
点赞#icon-likes
-
附件#icon-attachment
-
付款申请#icon-pay
-
更多#icon-more
-
关闭-1#icon-shut
-
关闭#icon-close
-
红旗未选中#icon-unflag
-
红旗#icon-flag
-
紧急邮件#icon-emer-mail
-
禁用#icon-disabled
-
快速新建#icon-build
-
请假申请#icon-absence
-
评论#icon-comment
-
筛选#icon-filter
-
启用#icon-enabled
-
删除#icon-del
-
上传列表-1#icon-transport-list
-
收藏#icon-keep
-
视图切换#icon-menu-app
-
收件箱#icon-inbox
-
搜索#icon-search
-
通知#icon-notice
-
外出申请#icon-eg-apply
-
拖移#icon-drag
-
文件夹#icon-folder
-
问号#icon-question
-
下拉#icon-arrow-down
-
下拉-1#icon-caret-bottom
-
写信#icon-write-letter
-
已读邮件#icon-mail-read
-
暂停#icon-pause
-
展开#icon-expand
-
已发送邮件#icon-mail-send
-
转发#icon-forwarded
-
子文件#icon-subfile
-
邮件#icon-email
-
左箭头#icon-arrow-left
-
右箭头#icon-arrow-right
-
下拉#icon-arrow-up
-
恢复#icon-redo
-
撤销#icon-undo
-
互动#icon-interactive
-
背景#icon-background
-
图片#icon-image
-
形状#icon-shape
-
左对齐#icon-left-alignment
-
垂直居中#icon-chuizhijuzhong
-
顶对齐#icon-top-alignment
-
底对齐#icon-bottom-alignment
-
居中#icon-center
-
文本#icon-text
-
复制#icon-copy
-
返回#icon-back
-
添加#icon-add
-
网格#icon-grid
-
导出_normal#icon-export
-
上传列表-1#icon-upload-lists-copy
symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
使用步骤如下:
第一步:引入项目下面生成的symbol代码:
<script src="./iconfont.js"></script>
第二步:加入通用css代码(引入一次就行):
<style type="text/css">
.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>