IconFont 图标
- 换乘蓝色4896cd红色ce4d4d
- 换乘历史d4d4d4
- 换乘虚线
- 搜索站点虚线d4d4d4
- add
- alert
- alert2
- back
- brt
- close
- code
- comment
- commentf8c218
- delete
- ditieluxian
- edit
- exchange
- exchange2
- exchange3
- exchange4
- exitfull
- faxianf97a92
- fujin
- fujin2
- full
- gzmetro
- history
- hot
- houchedian
- jifen
- level14cfaa
- moblie
- more
- password
- pulldown
- pullup
- record
- reflesh
- right
- search
- search2
- shangche
- share
- shoucan
- shoucan2
- tixing
- to
- user
- wallet18aded
- zhandian
- luxian
- time
- exchange_bus
- exchange_metro
- exchange_walk
- exchange_in
- exchange_out
- voice
- reset
- 搜索
- info#56be4d
- recharge#56be4d
- thumb2#56be4d
- details#56be4d
- thumb#56be4d
- ok#5bbd54
- ok#a1a1a1
- cxb#1ca7ec
- alike#fba4b4
- jp#14cfaa
- comment#f8c218
- yct#f8c218
- setting#6f89e7
- yct#56be4d
- announcement#ff9c48
- ascending#56be4d
- descending#56be4d
- shikebiao#5bbd54
- shuiba#5bbd54
- coupon#f7585a
- boat#56be4d
- gothere#56be4d
- dd#a1a1a1
- gjz#a1a1a1
- dt#a1a1a1
- bust#56be4d
- kyz#a1a1a1
- mt#a1a1a1
- nearby#56be4d
- map#56be4d
- sb#a1a1a1
- lx#a1a1a1
- sc#56be4d
- add#56be4d
- delete#e85e5e
- down#56be4d
- next#56be4d
- buy#56be4d
- buy#a1a1a1
- calendar#56be4d
- order#56be4d
- order#a1a1a1
- pre#56be4d
- setting#56be4d
- setting#a1a1a1
- warning#56be4d
- time#a1a1a1
- guide#ffffff
- guide#5bbd54
- add#22d288
- back#22d288
- busstop#22d288
- clear#22d288
- alert#333333
- clear#888888
- coupon#888888
- bus#22d288
- delete#888888
- dd#22d288
- down#22d288
- dianshu#888888
- favor#22d288
- favorable#333333
- gzmetro#22d288
- kyz#22d288
- favor2#22d288
- licheng#888888
- kp#22d288
- lx#22d288
- more#22d288
- metro#22d288
- more#888888
- orient#333333
- mt#22d288
- search#888888
- sort#22d288
- shift#22d288
- sort#333333
- subway#333333
- up#22d288
- setting#ffffff
- walk#22d288
- voice#888888
- sb#22d288
- zjy#22d288
- busstop#888888
- mt#888888
- bell#333333
- f5#333333
- comment#333333
- favor2#333333
- delete#888888
- favor#333333
- metro#333333
- shift#333333
- more#333333
- home#333
- office#333
- order
- set
- order2
- code2
- code
- mt
- xq
- ticket2
- xq2
- set2
- ticket
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"。