IconFont 图标
-
3d-cube
-
adjust
-
air-plane
-
alarm-clock
-
animal-footprint
-
arrow-curve-left
-
arrow-curve-recycle
-
arrow-curve-right
-
arrow-cycle
-
arrow-cycling
-
arrow-down
-
arrow-down-big
-
arrow-down-bold
-
arrow-down-bold-round
-
arrow-down-light
-
arrow-down-thin
-
arrow-fill-down
-
arrow-fill-left
-
arrow-fill-right
-
arrow-fill-up
-
arrow-left-big
-
arrow-left-bold
-
arrow-left-bold-round
-
arrow-left-light
-
arrow-left-thin
-
arrow-multi-line-down
-
arrow-multi-line-left
-
arrow-multi-line-right
-
arrow-multi-line-up
-
arrow-oblique-contract
-
arrow-oblique-contract-directions
-
arrow-oblique-expand
-
arrow-oblique-expand-directions
-
arrow-right
-
arrow-right-big
-
arrow-right-bold
-
arrow-right-bold-round
-
arrow-right-light
-
arrow-right-thin
-
arrow-up
-
arrow-up-big
-
arrow-up-bold
-
arrow-up-bold-round
-
arrow-up-light
-
arrow-up-thin
-
atom
-
axis-rules
-
backward
-
bag
-
ban-circle
-
bars
-
bezier
-
blank
-
block-menu
-
bolt
-
box-add
-
box-blank
-
box-close
-
box-remove
-
browser-sizes
-
brush
-
button-add
-
button-check
-
button-close
-
button-email
-
button-exclamation
-
button-minus
-
button-question
-
camera
-
cd-dvd-rom
-
chart-down
-
chat
-
check
-
circles
-
clock
-
cloud
-
cloud-add
-
cloud-download
-
cloud-remove
-
cloud-upload
-
coins
-
comment
-
comments
-
compass
-
compass-2
-
contract-directions
-
contract-horizontal
-
contract-vertical
-
copy-document
-
copy-paste-document
-
credit-card
-
cross
-
directions
-
document
-
document-fill
-
documents
-
dollar
-
dot-circle
-
dot-line
-
dot-square
-
double-diamonds
-
download
-
download-selection
-
download-selection-circle
-
drop
-
drops
-
eject
-
email-add
-
email-close
-
email-download
-
email-luminosity
-
email-remove
-
email-spam
-
email-upload
-
euro
-
exclamation
-
expand
-
expand-directions
-
expand-horizontal
-
expand-vertical
-
eye
-
eye-disabled
-
female-symbol
-
fire
-
forward
-
graphs
-
grid-big
-
grids
-
hdd
-
hdd-net
-
hdd-raid
-
heart
-
home-wifi
-
idea
-
info
-
italic
-
key
-
landscape
-
layers
-
leaf
-
left-right
-
like-add
-
like-ban
-
like-close
-
like-download
-
like-remove
-
like-upload
-
limit-directions
-
line-through
-
link-url
-
list-circle
-
list-square
-
location
-
location-maps
-
locked
-
login-lock-refresh
-
magic-wand
-
magnet
-
mail
-
mailbox
-
male-symbol
-
map
-
marker
-
marker-add
-
marker-minus
-
marker-points
-
minus
-
multi-borders
-
music
-
next-fast-step
-
next-step
-
number-eight
-
number-five
-
number-four
-
number-nine
-
number-one
-
number-seven
-
number-six
-
number-three
-
number-two
-
number-zero
-
off
-
officine
-
officine-2
-
options-settings
-
paperclip
-
paperclip-oblique
-
pause
-
pig-money
-
pin
-
pin-map
-
play
-
plus
-
podcast
-
pounds
-
previous-fast-step
-
prev-step
-
question
-
quote
-
random
-
rec
-
refresh
-
report-comment
-
retweet
-
rss
-
rules
-
scale
-
search
-
select-circle
-
select-square
-
setting
-
settings
-
shield
-
sign-female
-
sign-male
-
sliders
-
sliders-vertical
-
snow
-
social-500px
-
social-addthis
-
social-bebo
-
social-behance
-
social-blogger
-
social-deviantart
-
social-digg
-
social-dribbble
-
social-email
-
social-envato
-
social-evernote
-
social-facebook
-
social-flickr
-
social-forrst
-
social-github
-
social-google-plus
-
social-grooveshark
-
social-last-fm
-
social-linkedin
-
social-myspace
-
social-paypal
-
social-photobucket
-
social-pinterest
-
social-quora
-
social-sharethis
-
social-skype
-
social-soundcloud
-
social-stumbleupon
-
social-tumblr
-
social-twitter
-
social-viddler
-
social-vimeo
-
social-virb
-
social-wordpress
-
social-yahoo
-
social-yelp
-
social-youtube
-
social-zerply
-
sos
-
sound-off
-
sound-on
-
speed
-
star
-
stop
-
sun
-
sunshine
-
telephone
-
text-align-left
-
text-align-right
-
text-bold
-
text-center
-
text-height
-
text-justify-center
-
text-justify-left
-
text-justify-right
-
text-normal
-
text-paragraph
-
text-size-reduce
-
text-size-upper
-
text-width
-
three-points
-
three-points-bottom
-
three-points-top
-
top-bottom
-
triple-points
-
underline
-
upload
-
upload-selection
-
upload-selection-circle
-
user
-
user-add
-
user-ban
-
user-remove
-
viewport
-
viewport-video
-
waves
-
wifi
-
wind
-
wireframe-globe
-
yen
unicode引用
unicode是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
unicode使用步骤如下:
第一步:拷贝项目下面生成的font-face
@font-face {
font-family: 'iconfont';
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#iconfont') format('svg');
}
第二步:定义使用iconfont的样式
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="iconfont">3</i>
"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。