IconFont 图标
-
3d-cube#icon-3dcube
-
adjust#icon-adjust
-
air-plane#icon-airplane
-
alarm-clock#icon-alarmclock
-
animal-footprint#icon-animalfootprint
-
arrow-curve-left#icon-arrowcurveleft
-
arrow-curve-recycle#icon-arrowcurverecycle
-
arrow-curve-right#icon-arrowcurveright
-
arrow-cycle#icon-arrowcycle
-
arrow-cycling#icon-arrowcycling
-
arrow-down#icon-arrowdown
-
arrow-down-big#icon-arrowdownbig
-
arrow-down-bold#icon-arrowdownbold
-
arrow-down-bold-round#icon-arrowdownboldround
-
arrow-down-light#icon-arrowdownlight
-
arrow-down-thin#icon-arrowdownthin
-
arrow-fill-down#icon-arrowfilldown
-
arrow-fill-left#icon-arrowfillleft
-
arrow-fill-right#icon-arrowfillright
-
arrow-fill-up#icon-arrowfillup
-
arrow-left-big#icon-arrowleftbig
-
arrow-left-bold#icon-arrowleftbold
-
arrow-left-bold-round#icon-arrowleftboldround
-
arrow-left-light#icon-arrowleftlight
-
arrow-left-thin#icon-arrowleftthin
-
arrow-multi-line-down#icon-arrowmultilinedown
-
arrow-multi-line-left#icon-arrowmultilineleft
-
arrow-multi-line-right#icon-arrowmultilineright
-
arrow-multi-line-up#icon-arrowmultilineup
-
arrow-oblique-contract#icon-arrowobliquecontract
-
arrow-oblique-contract-directions#icon-arrowobliquecontractdirections
-
arrow-oblique-expand#icon-arrowobliqueexpand
-
arrow-oblique-expand-directions#icon-arrowobliqueexpanddirections
-
arrow-right#icon-arrowright
-
arrow-right-big#icon-arrowrightbig
-
arrow-right-bold#icon-arrowrightbold
-
arrow-right-bold-round#icon-arrowrightboldround
-
arrow-right-light#icon-arrowrightlight
-
arrow-right-thin#icon-arrowrightthin
-
arrow-up#icon-arrowup
-
arrow-up-big#icon-arrowupbig
-
arrow-up-bold#icon-arrowupbold
-
arrow-up-bold-round#icon-arrowupboldround
-
arrow-up-light#icon-arrowuplight
-
arrow-up-thin#icon-arrowupthin
-
atom#icon-atom
-
axis-rules#icon-axisrules
-
backward#icon-backward
-
bag#icon-bag
-
ban-circle#icon-bancircle
-
bars#icon-bars
-
bezier#icon-bezier
-
blank#icon-blank
-
block-menu#icon-blockmenu
-
bolt#icon-bolt
-
box-add#icon-boxadd
-
box-blank#icon-boxblank
-
box-close#icon-boxclose
-
box-remove#icon-boxremove
-
browser-sizes#icon-browsersizes
-
brush#icon-brush
-
button-add#icon-buttonadd
-
button-check#icon-buttoncheck
-
button-close#icon-buttonclose
-
button-email#icon-buttonemail
-
button-exclamation#icon-buttonexclamation
-
button-minus#icon-buttonminus
-
button-question#icon-buttonquestion
-
camera#icon-camera
-
cd-dvd-rom#icon-cddvdrom
-
chart-down#icon-chartdown
-
chat#icon-chat
-
check#icon-check
-
circles#icon-circles
-
clock#icon-clock
-
cloud#icon-cloud
-
cloud-add#icon-cloudadd
-
cloud-download#icon-clouddownload
-
cloud-remove#icon-cloudremove
-
cloud-upload#icon-cloudupload
-
coins#icon-coins
-
comment#icon-comment
-
comments#icon-comments
-
compass#icon-compass
-
compass-2#icon-compass2
-
contract-directions#icon-contractdirections
-
contract-horizontal#icon-contracthorizontal
-
contract-vertical#icon-contractvertical
-
copy-document#icon-copydocument
-
copy-paste-document#icon-copypastedocument
-
credit-card#icon-creditcard
-
cross#icon-cross
-
directions#icon-directions
-
document#icon-document
-
document-fill#icon-documentfill
-
documents#icon-documents
-
dollar#icon-dollar
-
dot-circle#icon-dotcircle
-
dot-line#icon-dotline
-
dot-square#icon-dotsquare
-
double-diamonds#icon-doublediamonds
-
download#icon-download
-
download-selection#icon-downloadselection
-
download-selection-circle#icon-downloadselectioncircle
-
drop#icon-drop
-
drops#icon-drops
-
eject#icon-eject
-
email-add#icon-emailadd
-
email-close#icon-emailclose
-
email-download#icon-emaildownload
-
email-luminosity#icon-emailluminosity
-
email-remove#icon-emailremove
-
email-spam#icon-emailspam
-
email-upload#icon-emailupload
-
euro#icon-euro
-
exclamation#icon-exclamation
-
expand#icon-expand
-
expand-directions#icon-expanddirections
-
expand-horizontal#icon-expandhorizontal
-
expand-vertical#icon-expandvertical
-
eye#icon-eye
-
eye-disabled#icon-eyedisabled
-
female-symbol#icon-femalesymbol
-
fire#icon-fire
-
forward#icon-forward
-
graphs#icon-graphs
-
grid-big#icon-gridbig
-
grids#icon-grids
-
hdd#icon-hdd
-
hdd-net#icon-hddnet
-
hdd-raid#icon-hddraid
-
heart#icon-heart
-
home-wifi#icon-homewifi
-
idea#icon-idea
-
info#icon-info
-
italic#icon-italic
-
key#icon-key
-
landscape#icon-landscape
-
layers#icon-layers
-
leaf#icon-leaf
-
left-right#icon-leftright
-
like-add#icon-likeadd
-
like-ban#icon-likeban
-
like-close#icon-likeclose
-
like-download#icon-likedownload
-
like-remove#icon-likeremove
-
like-upload#icon-likeupload
-
limit-directions#icon-limitdirections
-
line-through#icon-linethrough
-
link-url#icon-linkurl
-
list-circle#icon-listcircle
-
list-square#icon-listsquare
-
location#icon-location
-
location-maps#icon-locationmaps
-
locked#icon-locked
-
login-lock-refresh#icon-loginlockrefresh
-
magic-wand#icon-magicwand
-
magnet#icon-magnet
-
mail#icon-mail
-
mailbox#icon-mailbox
-
male-symbol#icon-malesymbol
-
map#icon-map
-
marker#icon-marker
-
marker-add#icon-markeradd
-
marker-minus#icon-markerminus
-
marker-points#icon-markerpoints
-
minus#icon-minus
-
multi-borders#icon-multiborders
-
music#icon-music
-
next-fast-step#icon-nextfaststep
-
next-step#icon-nextstep
-
number-eight#icon-numbereight
-
number-five#icon-numberfive
-
number-four#icon-numberfour
-
number-nine#icon-numbernine
-
number-one#icon-numberone
-
number-seven#icon-numberseven
-
number-six#icon-numbersix
-
number-three#icon-numberthree
-
number-two#icon-numbertwo
-
number-zero#icon-numberzero
-
off#icon-off
-
officine#icon-officine
-
officine-2#icon-officine2
-
options-settings#icon-optionssettings
-
paperclip#icon-paperclip
-
paperclip-oblique#icon-paperclipoblique
-
pause#icon-pause
-
pig-money#icon-pigmoney
-
pin#icon-pin
-
pin-map#icon-pinmap
-
play#icon-play
-
plus#icon-plus
-
podcast#icon-podcast
-
pounds#icon-pounds
-
previous-fast-step#icon-previousfaststep
-
prev-step#icon-prevstep
-
question#icon-question
-
quote#icon-quote
-
random#icon-random
-
rec#icon-rec
-
refresh#icon-refresh
-
report-comment#icon-reportcomment
-
retweet#icon-retweet
-
rss#icon-rss
-
rules#icon-rules
-
scale#icon-scale
-
search#icon-search
-
select-circle#icon-selectcircle
-
select-square#icon-selectsquare
-
setting#icon-setting
-
settings#icon-settings
-
shield#icon-shield
-
sign-female#icon-signfemale
-
sign-male#icon-signmale
-
sliders#icon-sliders
-
sliders-vertical#icon-slidersvertical
-
snow#icon-snow
-
social-500px#icon-social500px
-
social-addthis#icon-socialaddthis
-
social-bebo#icon-socialbebo
-
social-behance#icon-socialbehance
-
social-blogger#icon-socialblogger
-
social-deviantart#icon-socialdeviantart
-
social-digg#icon-socialdigg
-
social-dribbble#icon-socialdribbble
-
social-email#icon-socialemail
-
social-envato#icon-socialenvato
-
social-evernote#icon-socialevernote
-
social-facebook#icon-socialfacebook
-
social-flickr#icon-socialflickr
-
social-forrst#icon-socialforrst
-
social-github#icon-socialgithub
-
social-google-plus#icon-socialgoogleplus
-
social-grooveshark#icon-socialgrooveshark
-
social-last-fm#icon-sociallastfm
-
social-linkedin#icon-sociallinkedin
-
social-myspace#icon-socialmyspace
-
social-paypal#icon-socialpaypal
-
social-photobucket#icon-socialphotobucket
-
social-pinterest#icon-socialpinterest
-
social-quora#icon-socialquora
-
social-sharethis#icon-socialsharethis
-
social-skype#icon-socialskype
-
social-soundcloud#icon-socialsoundcloud
-
social-stumbleupon#icon-socialstumbleupon
-
social-tumblr#icon-socialtumblr
-
social-twitter#icon-socialtwitter
-
social-viddler#icon-socialviddler
-
social-vimeo#icon-socialvimeo
-
social-virb#icon-socialvirb
-
social-wordpress#icon-socialwordpress
-
social-yahoo#icon-socialyahoo
-
social-yelp#icon-socialyelp
-
social-youtube#icon-socialyoutube
-
social-zerply#icon-socialzerply
-
sos#icon-sos
-
sound-off#icon-soundoff
-
sound-on#icon-soundon
-
speed#icon-speed
-
star#icon-star
-
stop#icon-stop
-
sun#icon-sun
-
sunshine#icon-sunshine
-
telephone#icon-telephone
-
text-align-left#icon-textalignleft
-
text-align-right#icon-textalignright
-
text-bold#icon-textbold
-
text-center#icon-textcenter
-
text-height#icon-textheight
-
text-justify-center#icon-textjustifycenter
-
text-justify-left#icon-textjustifyleft
-
text-justify-right#icon-textjustifyright
-
text-normal#icon-textnormal
-
text-paragraph#icon-textparagraph
-
text-size-reduce#icon-textsizereduce
-
text-size-upper#icon-textsizeupper
-
text-width#icon-textwidth
-
three-points#icon-threepoints
-
three-points-bottom#icon-threepointsbottom
-
three-points-top#icon-threepointstop
-
top-bottom#icon-topbottom
-
triple-points#icon-triplepoints
-
underline#icon-underline
-
upload#icon-upload
-
upload-selection#icon-uploadselection
-
upload-selection-circle#icon-uploadselectioncircle
-
user#icon-user
-
user-add#icon-useradd
-
user-ban#icon-userban
-
user-remove#icon-userremove
-
viewport#icon-viewport
-
viewport-video#icon-viewportvideo
-
waves#icon-waves
-
wifi#icon-wifi
-
wind#icon-wind
-
wireframe-globe#icon-wireframeglobe
-
yen#icon-yen
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>