IconFont 图标
-
portrait.icon-portrait
-
calendar.icon-calendar
-
recommend.icon-recommend
-
non-recommend.icon-non-recommend
-
message.icon-message
-
SearchBox.icon-SearchBox
-
option.icon-option
-
sequencing.icon-sequencing
-
none.icon-none
-
pickup.icon-pickup
-
collection.icon-collection
-
clues.icon-clues
-
business.icon-business
-
top.icon-top
-
event.icon-event
-
product.icon-product
-
dropdown.icon-dropdown
-
close.icon-close
-
open.icon-open
-
add.icon-add
-
all/page/add.icon-add2
-
delete.icon-delete
-
share.icon-share-
-
input/delete.icon-delete-
-
input/pickup.icon-pickup2
-
input/dropdown.icon-dropdown-copy
-
readmore.icon-readmore
-
close.icon-close2
-
money.icon-money
-
custom.icon-custom
-
toast/wrong.icon-danger
-
toast/warning.icon-warning
-
toast/right.icon-success
-
popup/check-circle.icon-check
-
check/focus.icon-check_focus
-
select/focus.icon-select_focus
-
non-select.icon-non-select
-
non-check.icon-non-check
-
amplification.icon-amplification
-
narrow.icon-narrow
-
table.icon-table
-
tabulation.icon-tabulation
-
tendency.icon-tendency
-
tree.icon-tree
-
left.icon-left
-
right.icon-right
-
form.icon-form
-
home/clue.icon-clue
-
home/company.icon-company
-
home/graphic.icon-graphic
-
home/business.icon-business1
-
home/event.icon-event1
-
home/product.icon-product1
-
home/performance.icon-performance
-
home/risk.icon-risk
-
home/tips.icon-tips
-
home/dynamic.icon-dynamic
-
home/custom.icon-custom1
-
home/setting.icon-setting
-
local.icon-local
-
scroll/circle/normal.icon-active
-
scroll/circle/red.icon-active1
-
sidebar/viewmore.icon-viewmore
-
change.icon-change
-
hot.icon-hot
-
toast/message.icon-info
-
attention.icon-attention1
-
refresh.icon-refresh
-
equal.icon-equal
-
focused.icon-focused
-
tips/industry.icon-industry
-
remove.icon-remove
-
company.icon-company-
-
left.icon-left1
-
right.icon-right1
-
filtrate.icon-filtrate
-
contacts.icon-contacts
-
marketing.icon-marketing-
-
check_anything.icon-check_anything
-
down.icon-down
-
up.icon-up
-
contacts/add.icon-add1
-
customers/add.icon-add-
-
marketing/add.icon-marketing-1
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"。