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
font-class引用
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
- 兼容性良好,支持ie8+,及所有现代浏览器。
- 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:
第一步:引入项目下面生成的fontclass代码:
<link rel="stylesheet" type="text/css" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<i class="iconfont icon-xxx"></i>
"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。