IconFont 图标
-
数据#iconfont-report-form
-
点赞#iconfont-dianzan
-
导入#iconfont-import
-
产品2#iconfont-product
-
链接#iconfont-butt-joint
-
人脉#iconfont-talents
-
企业#iconfont-enterprise
-
基本信息#iconfont-basic-info
-
电话#iconfont-phone
-
change_record_type#iconfont-transform
-
学士帽-实#iconfont-colleges
-
44贷款-线性#iconfont-push-score
-
五角星#iconfont-like-tags
-
咨询#iconfont-consult
-
设置#iconfont-shezhi
-
专利资助-01#iconfont-achievement
-
提案审批#iconfont-check-info
-
分享#iconfont-share
-
走访记录#iconfont-interview
-
人民币#iconfont-renminbi
-
演示手指#iconfont-single-select
-
美元#iconfont-dollor
-
认证#iconfont-renzheng
-
政府#iconfont-government
-
眼睛#iconfont-check-number-copy
-
会员#iconfont-push-menber
-
服务#iconfont-service
-
Add User#iconfont-add-person
-
书籍#iconfont-demand
-
专利信息#iconfont-patents
-
消息#iconfont-comment
-
人民币#iconfont-yuan
-
注意#iconfont-notice
-
个人#iconfont-individual
-
143帮助、灯-线性#iconfont-alarm-lamp
-
评论区#iconfont-comment-section
-
收 藏#iconfont-collection
-
resource-library-off#iconfont-resource-library-off
-
resource-library-on#iconfont-resource-library-on
-
about-me-on#iconfont-about-me-on
-
home-on#iconfont-home-on
-
science-circle-on#iconfont-science-circle-on
-
home-off#iconfont-home-off
-
about-me-off#iconfont-about-me-off
-
science-circle-off#iconfont-science-circle-off
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="#iconfont-xxx"></use>
</svg>