Use Custom Button Icons in Sencha Touch

Sencha touch comes with an array of beautiful icons for almost every need of your app. However, if you’ve made a few apps you’ll realize that not all the icons in the resources folder work in the iconCls. Also, at times you may need to make your own app specific icons and personalize your app. This is a very easy process. And I’m gonna take you through the steps after the jump 🙂

To Upload Your Own Button Image

1. Upload your image to :  http://www.base64-image.de/  and click “Encode Image”
2. Copy the Base64 string that you obtain.
3. Make/Use your own CSS stylesheet (if you use the Sencha one it probably won’t work)
4. In the stylesheet this is the code you need to insert.

 
Sencha Touch 1 : 
  .x-tab img.YourIconName, .x-button img.x-icon-mask.YourIconName {
        -webkit-mask-image: url(‘data:image/png;base64,YourBase64StringFromStep2Here’);
}
 
// Alternative 2 for Sencha Touch 1 : As submitted by Jaganlal (adds a few places the button can be used in)
 
.x-tab .x-button-icon.YourIconName, .x-button .x-button-icon.x-icon-mask.YourIconName {
        -webkit-mask-image: url(‘data:image/png;base64,YourBase64StringFromStep2Here’);
}
 

Sencha Touch 2 :

.x-tab .x-button-icon.bp,
.x-button .x-button-icon.x-icon-mask.bp {
-webkit-mask-image: url(‘data:image/png;base64,YourBase64StringFromStep2Here’);
}

 

Now,

In the code your button should be like so (Is the same for ST1 & ST2):

{
    xtype : 'button, text : 'YourButtonName',
    iconCls : 'YourIconName',
    iconMask : true,
    handler : function( ) { ........... }
}

And now you will have the icon of your choice in your app.

Changing the Highlighting Color of your button

To add a different CSS colour to your button when it is activated and deactivated (ie background colour when selected or unselected), I found this code that seems to work.

/* This works too
.active-icon span:nth-child(2) { background-color: yellow !important; }
 
*/ // This also works
.active-icon .x-button-icon:nth-of-type(2) { background-color: yellow !important; }
 
 

Cheers & All the best 🙂

Advertisements

23 thoughts on “Use Custom Button Icons in Sencha Touch

    • Did you make your own .css file and add the referece of that to the index.html file ?? Cos if you add this code to the sencha touch .css file it won’t work.

  1. Having an issue also – quite new to all this. Heres what I have done: created a new css file with above code and LINK in the index.html, added button code to js. Does the actual image file have to be somewhere? I figured that was what the base64 encoding was for….thanks

    • You don’t need to link the image or add it anywhere. The base64 encoding actually tells ur app how to draw that image. It encodes the image itself. No need to add the acual image link. The text or the string is a representation of the image itself.

  2. This worked for me

    .x-tab .x-button-icon.YourIconName ,
    .x-button .x-button-icon.x-icon-mask.YourIconName
    {
    -webkit-mask-image:
    url(‘data:image/png;base64,YourBase64StringFromStep2Here’);
    }

    • Nice. I see you added in a few extra places where the button would be available. I will append that to the post 🙂

    • That’s true Mathieu…. However, not everyone has/knows how to work in Ruby/scss. This is undoubtedly the easiest method 🙂

  3. Trying to get this to work for a toolbar button but only getting the white button image. Do I need to extend the css for this to work. Been trying but not got it yet

  4. Have now got it working using your original code rather than the enhanced one.
    All I need to do now is to figure out how to get it to show in colour

    • Hi Chris,
      I added in some code for the colour background to change 😀 Give it a try and let us know 😀
      Cheers Sasha

  5. I’m trying to use this on a button in a titlebar. It does NOT work!
    Looking at the DOM, “x-tab” and “x-button-icon” are nowhere to be found in the list of classes. Yet, the code on this page using these classes. I suspect that is the problem.

    • Are you using Sencha Touch 1 or 2 ?? I’ll add in some code for ST2 incase that’s the reason ur getting the error. The code above was only for ST1 (its a pretty old post you know)

  6. Pingback: Add Custom Pressed Cls/Colour to SegmentedButton Sencha Touch 2 | Tech-Talk-Tone

Leave a message :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s