IconFont 图标
-
number_6
-
number_7
-
number_9
-
number_0
-
number_3
-
number_1
-
number_4
-
number_8
-
number_punctuation
-
number_5
-
number_2
-
add
-
3column
-
4column
-
air-drop
-
add-r
-
add-s
-
arrow-double-left
-
app
-
also-loan
-
ascending
-
air
-
arrow-double-right
-
atm
-
atm-away
-
bad-r
-
attendance
-
bad
-
back-r
-
back
-
bank-card
-
bar-chart
-
box
-
building
-
business
-
bill
-
calculator
-
calendar
-
camera
-
businesscard
-
car
-
chat
-
cangneishicao
-
check
-
checkbox-selected
-
Chinese
-
checkbox
-
clock
-
close
-
commodity
-
colthes
-
compare
-
compass
-
complain
-
complete-r
-
complete
-
courier
-
copy
-
CSR
-
create-bill
-
cut
-
dashboard
-
delete
-
delivery
-
customs
-
descending
-
dialog
-
diamond
-
download
-
ding
-
drop
-
dollar
-
duihua
-
edit
-
electronics
-
English
-
error-s
-
enclosure
-
error-r
-
exclamatory-mark-r
-
exchange
-
exclamatory-mark-t
-
exclamatory-mark
-
extend-r
-
extend
-
exit-fullscreen
-
finance
-
favorites
-
filter
-
first-page
-
flash-lamp-auto
-
flash-lamp-off
-
flash-lamp
-
forward-r
-
forbidden
-
forward-sorting
-
fullscreen
-
forward
-
gifts
-
free
-
folder
-
good-r
-
good
-
group
-
home
-
history
-
image-text
-
horizontal-retractio
-
horizontal-expansion
-
horn
-
import
-
image
-
info-r
-
info
-
information
-
key
-
international
-
keyboard
-
last-page
-
increase
-
left
-
letter
-
lefy-exchange
-
left-sorting
-
light
-
like
-
link
-
line
-
load
-
loading-2
-
loading-1
-
lock
-
loan
-
location
-
logistics
-
macbook
-
logout
-
minus-r
-
map-1
-
map-2
-
mic
-
minus
-
mobile-Phone
-
minus-s
-
money
-
monitor
-
money-bill
-
moneys
-
more-transverse
-
locker
-
more-vertical
-
nav-list
-
news
-
no-attendance
-
not-sign
-
navigation
-
network
-
notice
-
office
-
operation
-
package
-
organization
-
open-package
-
paste
-
paly
-
pause
-
phone-r
-
PDA
-
pie-chart
-
position
-
power
-
prine
-
quality
-
question-mark-r
-
process
-
ppt
-
question-mark
-
Raidobox-selectedRai
-
red-packet
-
radar
-
refund
-
register
-
Raidobox
-
resource
-
refresh
-
reverse-sorting
-
relationship
-
right-exchange
-
rise
-
right
-
right-sorting
-
RMB
-
satisfy
-
safe
-
rule
-
save
-
scan
-
schedule
-
screwdriver
-
search
-
service
-
security
-
settlement
-
setup
-
share
-
setting
-
shield
-
shopping-cart
-
signed
-
shrink
-
shrink-r
-
shoppingbag
-
similar-product
-
slide
-
sort
-
stop
-
stock
-
standard
-
sorting
-
storage
-
store
-
tag-subscript
-
tag-selected
-
table
-
survey
-
sync
-
tag
-
task
-
top
-
time
-
transfer-station
-
text
-
trend-chart
-
template
-
unlock
-
upload
-
unsatisfy
-
unseen
-
user-r
-
user
-
usually
-
vedio
-
vertical-expansion
-
vertical-retraction
-
visible
-
view-list
-
volume
-
view-matrix
-
volumeopen
-
wallet
-
wave
-
warehouse
-
word
-
3column-o
-
add-o
-
4column-o
-
add-s-o
-
add-r-o
-
air-drop-o
-
app-o
-
arrow-double-right-o
-
also-loan-o
-
air-o
-
arrow-double-left-o
-
ascending-o
-
atm-o
-
back-o
-
attendance-o
-
atm-away-o
-
back-r-o
-
bad-o
-
bill-o
-
bank-card-o
-
bar-chart-o
-
box-o
-
business-o
-
bad-r-o
-
businesscard-o
-
building-o
-
calculator-o
-
camera-o
-
cangneishicao-o
-
car-o
-
calendar-o
-
chat-o
-
checkbox-selected-o
-
checkbox-o
-
clock-o
-
check-o
-
Chinese-o
-
close-o
-
commodity-o
-
complain-o
-
compare-o
-
compass-o
-
complete-o
-
complete-r-o
-
copy-o
-
courier-o
-
CSR-o
-
create-bill-o
-
colthes-o
-
cut-o
-
delete-o
-
dashboard-o
-
descending-o
-
delivery-o
-
dialog-o
-
customs-o
-
diamond-o
-
dollar-o
-
ding-o
-
download-o
-
duihua-o
-
edit-o
-
error-r-o
-
electronics-o
-
enclosure-o
-
English-o
-
drop-o
-
error-s-o
-
exchange-o
-
exclamatory-mark-t-o
-
exclamatory-mark-r-o
-
exclamatory-mark-o
-
extend-o
-
exit-fullscreen-o
-
filter-o
-
first-page-o
-
flash-lamp-auto-o
-
extend-r-o
-
favorites-o
-
finance-o
-
flash-lamp-o
-
folder-o
-
flash-lamp-off-o
-
forward-o
-
forbidden-o
-
forward-r-o
-
free-o
-
good-o
-
fullscreen-o
-
forward-sorting-o
-
gifts-o
-
good-r-o
-
home-o
-
group-o
-
history-o
-
horizontal-retractio
-
horizontal-expansion
-
horn-o
-
image-text-o
-
image-o
-
info-o
-
increase-o
-
info-r-o
-
import-o
-
information-o
-
key-o
-
keyboard-o
-
international-o
-
last-page-o
-
left-o
-
lefy-exchange-o
-
left-sorting-o
-
letter-o
-
light-o
-
like-o
-
line-o
-
link-o
-
load-o
-
loading-1-o
-
loading-2-o
-
loan-o
-
location-o
-
locker-o
-
logistics-o
-
lock-o
-
macbook-o
-
map-1-o
-
logout-o
-
map-2-o
-
minus-o
-
mic-o
-
mobile-Phone-o
-
minus-r-o
-
minus-s-o
-
money-bill-o
-
money-o
-
moneys-o
-
monitor-o
-
more-vertical-o
-
nav-list-o
-
navigation-o
-
network-o
-
more-transverse-o
-
news-o
-
no-attendance-o
-
notice-o
-
not-sign-o
-
open-package-o
-
office-o
-
operation-o
-
organization-o
-
package-o
-
paly-o
-
pause-o
-
paste-o
-
pie-chart-o
-
PDA-o
-
phone-r-o
-
ppt-o
-
power-o
-
position-o
-
prine-o
-
quality-o
-
process-o
-
question-mark-o
-
question-mark-r-o
-
radar-o
-
Raidobox-o
-
Raidobox-selectedRai
-
red-packet-o
-
refresh-o
-
register-o
-
refund-o
-
resource-o
-
relationship-o
-
reverse-sorting-o
-
right-exchange-o
-
rise-o
-
rule-o
-
right-o
-
right-sorting-o
-
RMB-o
-
safe-o
-
scan-o
-
satisfy-o
-
save-o
-
screwdriver-o
-
schedule-o
-
search-o
-
security-o
-
settlement-o
-
service-o
-
setting-o
-
setup-o
-
shoppingbag-o
-
share-o
-
shopping-cart-o
-
shield-o
-
shrink-r-o
-
shrink-o
-
signed-o
-
similar-product-o
-
sort-o
-
slide-o
-
sorting-o
-
stock-o
-
stop-o
-
standard-o
-
storage-o
-
survey-o
-
store-o
-
table-o
-
tag-o
-
tag-selected-o
-
sync-o
-
task-o
-
tag-subscript-o
-
template-o
-
text-o
-
time-o
-
top-o
-
transfer-station-o
-
trend-chart-o
-
unlock-o
-
unsatisfy-o
-
user-o
-
unseen-o
-
upload-o
-
usually-o
-
vedio-o
-
user-r-o
-
view-list-o
-
vertical-expansion-o
-
vertical-retraction-
-
volume-o
-
view-matrix-o
-
visible-o
-
wallet-o
-
volumeopen-o
-
warehouse-o
-
wave-o
-
word-o
-
arrow-down
-
arrow-left
-
arrow-right
-
arrow-up
-
arrow-down
-
arrow-right
-
arrow-left
-
arrow-up
unicode引用
unicode是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
unicode使用步骤如下:
第一步:拷贝项目下面生成的font-face
@font-face {
font-family: 'iconfont2';
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#iconfont2') format('svg');
}
第二步:定义使用iconfont的样式
.iconfont2{
font-family:"iconfont2" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="iconfont2">3</i>
"iconfont2"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。