View Full Version : Include a new icon in SCSS

13 Mar 2011, 9:22 AM

I have an icon I want to use in my application. What I do is: I resize my icon to 60x60 and include it in myapp.scss e.g. @include pictos-iconmask('checkered_flag'); To make my tab bar black I also add

.x-tabbar-black.x-docked-bottom {
.x-tab {
color: #ddd;
img {
background: #ddd none !important;

.x-tab-active {
color: white;
img {
background: white none !important;

After having compiled I use the icon for my tab button with iconCls: 'checked_flag'. The icon in the tab bar is displayed as a solid white flag (does not have black and white squares.)

How to fix this problem? Does Custom Theme allows I add my own icon and does an icon always have a 60x60 size?

I'd appreciate any pointers.

19 Apr 2011, 12:46 PM
I've got a similar problem. My icon works fine on iOS devices but shows a white square on chrome and Android devices. Is there a tutorial somewhere on how to create these images properly or perhaps there is a problem with the image itself? Also, how can I reverse the onclick color?

20 Apr 2011, 3:08 PM
You can make new icon images pretty easily, just take your image and convert it to base64 and put the base64 code in the css.

An online converter can be found at - http://www.greywyvern.com/code/php/binary2base64

21 Apr 2011, 5:53 AM
Thanks. I had some issue with unrelated CSS property.