IconFont 图标
-
麦克风#anticon-microphone
-
休闲,咖啡,娱乐#anticon-xiuxiankafeiyule
-
修改密码#anticon-iconfontmima
-
箭头#anticon-jiantou-copy-copy
-
同步数据库模型#anticon-tongbushujukumoxing
-
高级查询#anticon-query1
-
公文查询#anticon-gongwenchaxun
-
stepforward#anticon-stepforward
-
stepbackward#anticon-stepbackward
-
forward#anticon-forward
-
banckward#anticon-banckward
-
caretright#anticon-caretright
-
caretleft#anticon-caretleft
-
caretdown#anticon-caretdown
-
caretup#anticon-caretup
-
right-circle#anticon-rightcircle
-
left-circle#anticon-leftcircle
-
up-circle#anticon-upcircle
-
down-circle#anticon-downcircle
-
right-circle-o#anticon-rightcircleo
-
left-circle-o#anticon-leftcircleo
-
up-circle-o#anticon-upcircleo
-
down-circle-o#anticon-downcircleo
-
verticleleft#anticon-verticleleft
-
verticleright#anticon-verticleright
-
rollback#anticon-rollback
-
retweet#anticon-retweet
-
shrink#anticon-shrink
-
arrowsalt#anticon-arrowsalt
-
reload#anticon-reload
-
doubleright#anticon-doubleright
-
doubleleft#anticon-doubleleft
-
arrowdown#anticon-arrowdown
-
arrowup#anticon-arrowup
-
arrowright#anticon-arrowright
-
arrowleft#anticon-arrowleft
-
down#anticon-down
-
up#anticon-up
-
right#anticon-right
-
left#anticon-left
-
minus-square-o#anticon-minussquareo
-
minus-circle#anticon-minuscircle
-
minus-circle-o#anticon-minuscircleo
-
minus#anticon-minus
-
plus-circle-o#anticon-pluscircleo
-
plus-circle#anticon-pluscircle
-
plus#anticon-plus
-
info-cirlce#anticon-infocirlce
-
info-cirlce-o#anticon-infocirlceo
-
info#anticon-info
-
exclamation#anticon-exclamation
-
exclamation-circle#anticon-exclamationcircle
-
exclamation-circle-o#anticon-exclamationcircleo
-
close-circle#anticon-closecircle
-
close-circle-o#anticon-closecircleo
-
check-circle#anticon-checkcircle
-
check-circle-o#anticon-checkcircleo
-
check#anticon-check
-
close#anticon-close
-
customerservice#anticon-customerservice
-
creditcard#anticon-creditcard
-
code-square-o#anticon-codesquareo
-
book#anticon-book
-
barschart#anticon-barschart
-
bars#anticon-bars
-
question#anticon-question
-
question-circle#anticon-questioncircle
-
question-circle-o#anticon-questioncircleo
-
pause#anticon-pause
-
pause-circle#anticon-pausecircle
-
pause-circle-o#anticon-pausecircleo
-
clock-circle#anticon-clockcircle
-
clock-circle-o#anticon-clockcircleo
-
swap#anticon-swap
-
swapleft#anticon-swapleft
-
swapright#anticon-swapright
-
plus-square-o#anticon-plussquareo
-
frown#anticon-frown
-
ellipsis#anticon-ellipsis
-
copy#anticon-copy
-
customerservice#anticon-customerservice1
-
creditcard#anticon-creditcard1
-
code-square-o#anticon-codesquareo1
-
book#anticon-book1
-
barschart#anticon-barschart1
-
bars#anticon-bars1
-
question#anticon-question1
-
question-circle#anticon-questioncircle1
-
question-circle-o#anticon-questioncircleo1
-
pause#anticon-pause1
-
pause-circle#anticon-pausecircle1
-
pause-circle-o#anticon-pausecircleo1
-
clock-circle#anticon-clockcircle1
-
clock-circle-o#anticon-clockcircleo1
-
swap#anticon-swap1
-
menufold#anticon-menufold
-
mail#anticon-mail
-
logout#anticon-logout
-
link#anticon-link
-
areachart#anticon-areachart
-
linechart#anticon-linechart
-
home#anticon-home
-
laptop#anticon-laptop
-
star#anticon-star
-
star-o#anticon-staro
-
folder#anticon-folder
-
filter#anticon-filter
-
file#anticon-file
-
exception#anticon-exception
-
meho#anticon-meho
-
meh#anticon-meh
-
shoppingcart#anticon-shoppingcart
-
save#anticon-save
-
user#anticon-user
-
videocamera#anticon-videocamera
-
totop#anticon-totop
-
team#anticon-team
-
tablet#anticon-tablet
-
solution#anticon-solution
-
search#anticon-search
-
sharealt#anticon-sharealt
-
setting#anticon-setting
-
poweroff#anticon-poweroff
-
picture#anticon-picture
-
phone#anticon-phone
-
paperclip#anticon-paperclip
-
notification#anticon-notification
-
mobile#anticon-mobile
-
menuunfold#anticon-menuunfold
-
inbox#anticon-inbox
-
qrcode#anticon-qrcode
-
tags#anticon-tags
-
tagso#anticon-tagso
-
cloud-o#anticon-cloudo
-
cloud#anticon-cloud
-
cloudupload#anticon-cloudupload
-
clouddownload#anticon-clouddownload
-
clouddownload-o#anticon-clouddownloado
-
cloudupload-o#anticon-clouduploado
-
enviroment#anticon-enviroment
-
enviroment-o#anticon-enviromento
-
eye#anticon-eye
-
eye-o#anticon-eyeo
-
camera#anticon-camera
-
camera-o#anticon-camerao
-
windows#anticon-windows
-
apple#anticon-apple
-
android#anticon-android
-
aliwangwang#anticon-aliwangwang
-
aliwangwang-o#anticon-aliwangwango
-
export2#anticon-export2
-
export#anticon-export
-
edit#anticon-edit
-
circledown-o#anticon-circledowno
-
circledown#anticon-circledown
-
appstore-o#anticon-appstoreo
-
appstore#anticon-appstore
-
scan#anticon-scan
-
filetext#anticon-filetext
-
folderopen#anticon-folderopen
-
hdd#anticon-hdd
-
ie#anticon-ie
-
jpgfile#anticon-jpgfile
-
like#anticon-like
-
dislike#anticon-dislike
-
delete#anticon-delete
-
enter#anticon-enter
-
pushpin-o#anticon-pushpino
-
pushpin#anticon-pushpin
-
heart#anticon-heart
-
heart-o#anticon-hearto
-
smile#anticon-smile
-
smile-o#anticon-smileo
-
frown-o#anticon-frowno
-
calculator#anticon-calculator
-
message#anticon-message
-
chrome#anticon-chrome
-
github#anticon-github
-
loading#anticon-loading
-
unknowfile#anticon-unknowfile
-
exclefile#anticon-exclefile
-
pptfile#anticon-pptfile
-
wordfile#anticon-wordfile
-
pdffile#anticon-pdffile
-
desktop#anticon-iconfontdesktop
-
upload#anticon-upload
-
download#anticon-download
-
piechart#anticon-piechart
-
lock#anticon-lock
-
unlock#anticon-unlock
-
calendar#anticon-calendar
-
windows-o#anticon-windowso
-
dotchart#anticon-dotchart
-
barchart#anticon-barchart
-
code-square#anticon-codesquare
-
plus-square#anticon-plussquare
-
minus-square#anticon-minussquare
-
close-square#anticon-closesquare
-
close-square-o#anticon-closesquareo
-
check-square#anticon-checksquare
-
check-square-o#anticon-checksquareo
-
fastbackward#anticon-fastbackward
-
fastforward#anticon-fastforward
-
up-square#anticon-upsquare
-
down-square#anticon-downsquare
-
left-square#anticon-leftsquare
-
right-square#anticon-rightsquare
-
right-square-o#anticon-rightsquareo
-
left-square-o#anticon-leftsquareo
-
down-square-o#anticon-downsquareo
-
up-square-o#anticon-upsquareo
-
play#anticon-play
-
play-circle-o#anticon-playcircleo
-
tag#anticon-tag
-
tag-o#anticon-tago
-
apple-o#anticon-appleo
-
站内消息#anticon-zhanneixiaoxi
-
pay-circle#anticon-paycircle
-
pay-circle-o#anticon-paycircleo
-
项目消息#anticon-xiangmuxiaoxi
-
投影仪#anticon-touyingyi
-
部门管理#anticon-bumenguanli
-
消息#anticon-xiaoxi1
-
私有任务#anticon-siyourenwu
-
数据#anticon-fl-shuju
-
视频#anticon-shipin
-
二级-用户管理#anticon-erji-yonghuguanli
-
工作台#anticon-gongzuotai
-
下双箭头#anticon-xiashuangjiantou
-
共享区#anticon-gongxiangqu
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="#anticon-xxx"></use>
</svg>