IconFont 图标
-
日历#icon-panorama_time
-
引用#icon-yinyong
-
图片#icon-tupian
-
商店#icon-shangdian
-
用户组名称#icon-yonghuzumingcheng
-
42业务办理情况统计#icon-panorama_joinuser
-
43科室办理情况统计#icon-panorama_joindevice
-
商品#icon-shangpin
-
转化词#icon-hotword
-
订阅#icon-newsVerify
-
权限_角色#icon-access_user
-
词-禁#icon-sensitiveword
-
系统#icon-xitong
-
高级人才#icon-ydh
-
undo#icon-undo
-
H3#icon-h3
-
H2#icon-h21
-
H1#icon-H1
-
下拉#icon-dropdown
-
分类#icon-yidianhaoleibie
-
redo#icon-redo
-
加载#icon-unie60e
-
报刊杂志#icon-yidianhaowenzhang
-
清空#icon-empty
-
轮播组图#icon-lunbozutu
-
圈子#icon-quanzi
-
归档#icon-recycleNews
-
帖子#icon-tiezi
-
uniE6672#icon-unie6672
-
untitled22#icon-untitled22
-
uniE604#icon-unie604
-
untitled144#icon-untitled144
-
list-ol#icon-listol
-
tab-edit-tab#icon-newsChannel1
-
积分-17#icon-score
-
圈子_line#icon-quanziline
-
日志#icon-piliangicon
-
项目-#icon-yidianhaotiaomu
-
点击#icon-dianji
-
粉丝#icon-fans
-
radar chart#icon-radarchart
-
活动#icon-huodong
-
list-ol#icon-paixu
-
新闻#icon-news
-
奖牌#icon-jiangpai
-
全屏#icon-quanping
-
应用客户端设置#icon-appclient
-
文字-01#icon-wenzi01
-
内容#icon-neirong
-
排序#icon-paixu1
-
新闻评论回复#icon-newsComment
-
部门#icon-bumen
-
品牌#icon-pinpai
-
tab-unselected#icon-newsChannel
-
用户信息-线#icon-yonghuxinxixian
-
APP#icon-panorama_app
-
人群-上网时段#icon-panorama_today
-
推送#icon-tuisong
-
钥匙#icon-yaochi
-
更新_updated#icon-gengxinupdated
-
版本#icon-panorama_version
-
班级信息修改#icon-wochuangjiande
-
地图#icon-ditu-copy-copy
-
精选#icon-jingxuan-copy
-
移除#icon-yichu
-
音频#icon-cf-c85
-
join#icon-panorama_newboot
-
统计#icon-panorama
-
APP#icon-panorama_device
-
轮播图组件#icon-lunbotuzujian
-
排序#icon-order
-
排序#icon-sort
-
list-ul#icon-listul
-
安全中心#icon-anquanzhongxin
-
账户与权限#icon-zhanghuyuquanxian
-
链接#icon-lianjie
-
活跃数据#icon-panorama_action
-
初审#icon-yidianhaoshenhe
-
段落1#icon-duanluo1
-
角色权限#icon-jiaosequanxian0101
-
central-alignment#icon-centralalignment
-
left-alignment#icon-leftalignment
-
right-alignment#icon-rightalignment
-
视频#icon-shipin
-
城市#icon-city
-
图片#icon-tupian1
-
手机截屏#icon-startpage
-
加粗#icon-bold
-
角色设定#icon-jiaosesheding
-
创建角色#icon-chuangjianjiaose
-
用户等级#icon-yidianhao
-
工作项#icon-gongzuoxiang
-
icon_activity_pre#icon-iconactivitypre
-
斜体-im#icon-xietiim
-
获取icon#icon-grab
-
投稿#icon-draft
-
操作_文字#icon-caozuowenzi
-
centering alignment#icon-centeringalignment
-
文本粘贴#icon-wenbenzhantie
-
下划线#icon-xiahuaxian
-
1频道#icon-channelpd-copy
-
部门#icon-bumen-copy
-
角色管理#icon-10106-copy
-
H4#icon-h4
-
投稿#icon-tougao
-
修改密码#icon-updtpwd
-
icon_radar#icon-leida
-
断开链接#icon-duankailianjie
-
清除样式#icon-xiangpica
-
chart-radar#icon-chart-radar
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>