里面的图标看起来五颜六色,而且可以很方便的切换各种颜色出来。
在这里利用了html5的一些特性,其实这些ico的原型都是这样的
这个原型图片名为:maps.png
代码如下:
1 xtype: 'button',
text: '装修招标',
iconAlign: 'top',
iconCls: 'maps ico roseRed'
css如下:
1 .ico { 2 -webkit-mask-size:100%; 3 background-color:#6A6A6A; 4 background-image:none; 5 } 6 .maps { 7 -webkit-mask-image:url('../image/icon/maps.png'); 8 } 9 .roseRed { 10 background-color:#DE3554; 11 }
请自行谷歌-webkit-mask-image的作用。
补充一下,css还需要加上。用来去掉他本身的背景色和边框
1 .home .x-button { 2 background-image:none; 3 background-color:transparent; 4 border:0; 5 } 6 .home .x-button .x-button-label { 7 font-weight:normal; 8 color:#A8A8A8; 9 }