IconFont 图标
-
失败#bcui-icon-information-fail
-
提示#bcui-icon-icon
-
topic#bcui-icon-topic1
-
refresh#bcui-icon-refresh-single
-
点点#bcui-icon-setting-more
-
收藏#bcui-icon-shoucang
-
日志#bcui-icon-topic
-
加#bcui-icon-jia
-
减号#bcui-icon-jian
-
calendar#bcui-icon-calendar
-
check#bcui-icon-check
-
alert#bcui-icon-alert
-
blocks#bcui-icon-blocks
-
activated#bcui-icon-activated
-
chevron-right#bcui-icon-chevron-right
-
chevron-left#bcui-icon-chevron-left
-
calculator#bcui-icon-calculator
-
cloud#bcui-icon-cloud
-
chevron-top#bcui-icon-chevron-top
-
collapse#bcui-icon-collapse
-
chevron-bottom#bcui-icon-chevron-bottom
-
computer-filled#bcui-icon-computer-filled
-
computer#bcui-icon-computer
-
confirm#bcui-icon-confirm
-
disk#bcui-icon-disk
-
copy#bcui-icon-copy
-
hardware-filled#bcui-icon-hardware-filled
-
expand#bcui-icon-expand
-
error#bcui-icon-error
-
full#bcui-icon-full
-
hardware#bcui-icon-hardware
-
info#bcui-icon-info
-
loading#bcui-icon-loading
-
minus#bcui-icon-minus
-
mirror#bcui-icon-mirror
-
nodes#bcui-icon-nodes
-
network-filled#bcui-icon-network-filled
-
overview-filled#bcui-icon-overview-filled
-
overview#bcui-icon-overview
-
network#bcui-icon-network
-
pencil#bcui-icon-pencil
-
refresh#bcui-icon-refresh
-
power-off#bcui-icon-power-off
-
plus#bcui-icon-plus
-
search#bcui-icon-search
-
security-filled#bcui-icon-security-filled
-
stop#bcui-icon-stop
-
security#bcui-icon-security
-
start#bcui-icon-start
-
setting-filled#bcui-icon-setting-filled
-
setting#bcui-icon-setting
-
storage-filled#bcui-icon-storage-filled
-
terminal#bcui-icon-terminal
-
storage#bcui-icon-storage
-
times#bcui-icon-times
-
triangle-bottom#bcui-icon-triangle-bottom
-
trash#bcui-icon-trash
-
triangle-top#bcui-icon-triangle-top
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="#bcui-icon-xxx"></use>
</svg>