IconFont 图标
-
stepforward
-
stepbackward
-
forward
-
banckward
-
caretright
-
caretleft
-
caretdown
-
caretup
-
right-circle
-
left-circle
-
up-circle
-
down-circle
-
right-circle-o
-
left-circle-o
-
up-circle-o
-
down-circle-o
-
verticleleft
-
verticleright
-
rollback
-
retweet
-
shrink
-
arrowsalt
-
doubleright
-
doubleleft
-
arrowdown
-
arrowup
-
arrowright
-
arrowleft
-
down
-
up
-
right
-
left
-
minus-square-o
-
minus-circle
-
minus-circle-o
-
minus
-
plus-circle-o
-
plus-circle
-
plus
-
info-cirlce
-
info-cirlce-o
-
info
-
exclamation
-
exclamation-circle
-
exclamation-circle-o
-
close-circle
-
close-circle-o
-
check-circle
-
check-circle-o
-
check
-
close
-
customerservice
-
creditcard
-
code-square-o
-
book
-
barschart
-
bars
-
question
-
question-circle
-
question-circle-o
-
pause
-
pause-circle
-
pause-circle-o
-
clock-circle
-
clock-circle-o
-
swap
-
swapleft
-
swapright
-
plus-square-o
-
frown
-
menufold
-
mail
-
link
-
areachart
-
linechart
-
home
-
laptop
-
star
-
star-o
-
filter
-
meho
-
meh
-
shoppingcart
-
save
-
user
-
videocamera
-
totop
-
team
-
sharealt
-
setting
-
picture
-
phone
-
paperclip
-
notification
-
menuunfold
-
inbox
-
lock
-
qrcode
-
tags
-
tagso
-
cloud-o
-
cloud
-
cloudupload
-
clouddownload
-
clouddownload-o
-
cloudupload-o
-
enviroment
-
enviroment-o
-
eye
-
eye-o
-
camera
-
camera-o
-
windows
-
export2
-
export
-
circledown-o
-
circledown
-
hdd
-
ie
-
delete
-
enter
-
pushpin-o
-
pushpin
-
heart
-
heart-o
-
smile
-
smile-o
-
frown-o
-
calculator
-
chrome
-
github
-
desktop
-
caret-circle-o-up
-
upload
-
download
-
piechart
-
lock
-
unlock
-
windows-o
-
dotchart
-
barchart
-
code-square
-
plus-square
-
minus-square
-
close-square
-
close-square-o
-
check-square
-
check-square-o
-
fastbackward
-
fastforward
-
up-square
-
down-square
-
left-square
-
right-square
-
right-square-o
-
left-square-o
-
down-square-o
-
up-square-o
-
play
-
play-circle-o
-
tag
-
tag-o
-
addfile
-
folder
-
file
-
switcher
-
addfolder
-
folderopen
-
search
-
ellipsis
-
calendar
-
filetext
-
copy
-
jpgfile
-
pdffile
-
exclefile
-
pptfile
-
unknowfile
-
wordfile
-
dingding
-
dingding-o
-
mobile
-
tablet
-
bells
-
disconnect
-
database
-
barcode
-
hourglass
-
key
-
flag
-
layout
-
printer
-
USB
-
skin
-
tool
-
car
-
addusergroup
-
carryout
-
deleteuser
-
deleteusergroup
-
man
-
isv
-
gift
-
idcard
-
medicinebox
-
redenvelopes
-
rest
-
Safety
-
wallet
-
woman
-
adduser
-
bank
-
Trophy
-
loading
-
loading
-
like
-
dislike
-
like
-
dislike
-
bulb
-
rocket
-
select
-
apple
-
apple-o
-
android
-
android-o
-
aliwangwang-o
-
aliwangwang
-
pay-circle
-
pay-circle-o
-
poweroff
-
trademark
-
find
-
copyright
-
sound
-
earth
-
wifi
-
sync
-
login
-
logout
-
reload
-
message
-
shake
-
API
-
appstore-o
-
appstore
-
scan
-
exception
-
contacts
-
solution
-
fork
-
edit
-
表单
-
error
-
列表
-
详情
-
dashboard
-
indent-left
-
indent-right
-
menu-unfold
-
menu-fold
-
ant design
-
alipay-square
-
codepen-circle
-
google
-
amazon
-
codepen
-
facebook-square
-
dropbox
-
google plus
-
linkedin-square
-
medium-monogram
-
gitlab
-
medium-wordmark
-
QQ
-
skype
-
taobao-square
-
alipay-circle
-
youtube
-
wechat
-
twitter
-
weibo
-
HTML5
-
taobao-circle
-
weibo-circle
-
weibo-square
-
CodeSandbox
-
阿里云
-
zhihu
-
behance
-
dribbble
-
dribbble-square
-
behance-square
-
file-markdown
-
instagram
-
yuque
-
slack
-
slack-square
unicode引用
unicode是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
unicode使用步骤如下:
第一步:拷贝项目下面生成的font-face
@font-face {
font-family: 'anticon';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#anticon') format('svg');
}
第二步:定义使用iconfont的样式
.anticon{
font-family:"anticon" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="anticon">3</i>
"anticon"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。