Sencha touch customize icon css

Question

my designer already complete one html pages for me. Please see the html below

<li><div aria-hidden="true" data-icon="&#xe030;"></div>Setting</li>
        <li><div aria-hidden="true" data-icon="&#xe0cb;"></div>Black Button</li>
        <li><div aria-hidden="true" data-icon="&#xe2b5;"></div>Blue Button</li>
        <li><div aria-hidden="true" data-icon="&#xe050;"></div>Back</li>
        <li><div aria-hidden="true" data-icon="&#xf024;"></div>Notifications</li>

CSS

    @font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon/icomoon.eot');
    src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icomoon/icomoon.woff') format('woff'),
        url('../fonts/icomoon/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}



/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
    font-family: 'icomoon';
    color:#a58e28;
    content: attr(data-icon);
    speak: none;
    margin-right:5px;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}



/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-home, .icon-list, .icon-book, .icon-pencil, .icon-bookmark, .icon-pointer, .icon-cloud, .icon-cloud-ul, .icon-cloud-dl, .icon-search, .icon-folder, .icon-trashcan, .icon-droplet, .icon-tag, .icon-moon, .icon-eye, .icon-target, .icon-blocked, .icon-switch, .icon-goal, .icon-location, .icon-close, .icon-checkmark, .icon-munis, .icon-plus, .icon-close-2, .icon-divide, .icon-minus, .icon-plus-2, .icon-equals, .icon-cancel, .icon-minus-2, .icon-checkmark-2, .icon-equals-2, .icon-asterisk, .icon-mobile, .icon-tablet, .icon-phone, .icon-bars, .icon-stack, .icon-battery, .icon-battery-2, .icon-battery-3, .icon-calculator, .icon-bolt, .icon-list-2, .icon-grid, .icon-list-3, .icon-list-4, .icon-layout, .icon-equalizer, .icon-equalizer-2, .icon-cog, .icon-window, .icon-window-2, .icon-window-3, .icon-window-4, .icon-locked, .icon-unlocked, .icon-shield, .icon-cart, .icon-console, .icon-office, .icon-basket, .icon-suitcase, .icon-airplane, .icon-file-download, .icon-file-upload, .icon-file, .icon-file-add, .icon-file-remove, .icon-bars-2, .icon-chart, .icon-stats, .icon-arrow-right, .icon-arrow-left, .icon-arrow-down, .icon-arrow-up, .icon-arrow-right-2, .icon-arrow-left-2, .icon-arrow-up-2, .icon-arrow-down-2, .icon-arrow-down-left, .icon-arrow-down-right, .icon-arrow-up-left, .icon-arrow-up-right, .icon-arrow-left-3, .icon-arrow-right-3, .icon-arrow-down-3, .icon-arrow-up-3, .icon-move, .icon-movie, .icon-refresh, .icon-picture, .icon-music, .icon-disk, .icon-camera, .icon-film, .icon-tablet-2, .icon-ipod, .icon-camera-2, .icon-mouse, .icon-volume, .icon-monitor, .icon-thumbs-up, .icon-thumbs-down, .icon-neutral, .icon-grin, .icon-heart, .icon-pacman, .icon-star, .icon-star-2, .icon-envelope, .icon-comment, .icon-comment-2, .icon-user, .icon-download, .icon-upload, .icon-inbox, .icon-partial, .icon-unchecked, .icon-checked, .icon-circles, .icon-pencil-2, .icon-flag, .icon-link, .icon-stop, .icon-play, .icon-pause, .icon-next, .icon-previous, .icon-drink, .icon-drink-2, .icon-hamburger, .icon-mug, .icon-calendar, .icon-clock, .icon-calendar-2, .icon-compass, .icon-wind, .icon-snowflake, .icon-cloudy, .icon-cloud-2, .icon-weather, .icon-weather-2, .icon-weather-3, .icon-lines, .icon-cloud-3, .icon-lightning, .icon-lightning-2, .icon-rainy, .icon-rainy-2, .icon-windy, .icon-windy-2, .icon-snowy, .icon-snowy-2, .icon-snowy-3, .icon-weather-4, .icon-cloudy-2, .icon-cloud-4, .icon-lightning-3, .icon-sun, .icon-moon-2, .icon-cloudy-3, .icon-cloud-5, .icon-cloud-6, .icon-lightning-4, .icon-rainy-3, .icon-rainy-4, .icon-windy-3, .icon-windy-4, .icon-snowy-4, .icon-snowy-5, .icon-weather-5, .icon-cloudy-4, .icon-lightning-5, .icon-thermometer, .icon-compass-2, .icon-none, .icon-Celsius, .icon-Fahrenheit, .icon-sunrise, .icon-sun-2, .icon-sun-3, .icon-windy-5, .icon-moon-3, .icon-code, .icon-battery-4, .icon-target-2, .icon-winsows, .icon-atom, .icon-credit-card, .icon-database, .icon-button, .icon-disk-2, .icon-lamp, .icon-camera-3, .icon-bookmark-2, .icon-shit, .icon-smiley, .icon-stop-2, .icon-address-book, .icon-diary, .icon-trophy, .icon-filter, .icon-floppy, .icon-crop, .icon-keyboard, .icon-paperclip, .icon-forward, .icon-target-3, .icon-stats-2, .icon-volume-2, .icon-volume-3, .icon-grid-2, .icon-list-5, .icon-compass-3, .icon-ampersand, .icon-bolt-2, .icon-trashcan-2, .icon-ipod-2, .icon-flag-2, .icon-basket-2, .icon-coffee, .icon-alarm, .icon-cone, .icon-gift, .icon-skype, .icon-cancel-2, .icon-checkmark-3, .icon-move-2, .icon-headphones, .icon-thumbs-down-2, .icon-thumbs-up-2, .icon-pointer-2, .icon-star-3, .icon-phone-2, .icon-tag-2, .icon-location-2, .icon-refresh-2, .icon-mouse-2, .icon-droplet-2, .icon-mobile-2, .icon-monitor-2, .icon-window-5, .icon-calendar-3, .icon-wrench, .icon-bookmark-3, .icon-heart-2, .icon-eye-2, .icon-info, .icon-location-3, .icon-earth, .icon-home-2, .icon-type, .icon-film-2, .icon-console-2, .icon-bug, .icon-pause-2, .icon-play-2, .icon-target-4, .icon-blocked-2, .icon-feed, .icon-forrst, .icon-dribbble, .icon-search-2, .icon-camera-4, .icon-folder-2, .icon-picture-2, .icon-minus-3, .icon-plus-3, .icon-file-2, .icon-apple, .icon-chart-2, .icon-key, .icon-star-4, .icon-switch-2, .icon-frame, .icon-pencil-3, .icon-twitter, .icon-music-2, .icon-cog-2, .icon-user-2, .icon-clock-2, .icon-contrast, .icon-cart-2, .icon-briefcase, .icon-envelope-2, .icon-mic, .icon-comment-3, .icon-inbox-2, .icon-locked-2, .icon-cloud-7, .icon-warning, .icon-flag-3, .icon-comment-4, .icon-comments, .icon-cogs, .icon-facebook-sign, .icon-twitter-sign, .icon-camera-retro, .icon-twitter-2, .icon-facebook, .icon-credit, .icon-bullhorn, .icon-group, .icon-bell, .icon-trophy-2, .icon-bookmark-empty, .icon-money, .icon-ticket, .icon-instagram, .icon-gittip, .icon-users, .icon-vcard, .icon-flag-4, .icon-diamond, .icon-megaphone, .icon-banknote, .icon-bulb, .icon-wallet, .icon-camera-5, .icon-googleplus, .icon-heart-3, .icon-chat, .icon-comments-2, .icon-trash-alt, .icon-trash, .icon-users-2, .icon-users-3, .icon-paint-format, .icon-feed-2, .icon-podcast, .icon-ticket-2, .icon-coin, .icon-credit-2, .icon-calculate, .icon-qrcode, .icon-barcode, .icon-tags, .icon-tag-3 {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

senchaTabPanel.js

    Ext.define('blackbutton.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    id:'main',
    cls: 'slide',
    requires: [
        'Ext.TitleBar',
        'Ext.Video',
        'blackbutton.view.Black.Black',
        'blackbutton.view.CRM.CRM',
        'blackbutton.view.Setup.Setup',

        'Ext.Img',
        'Ext.ux.OptimizedTab.OptimizedTab',
        'Ext.carousel.Carousel'
    ],
    config: {
        tabBarPosition: 'bottom',
        defaultType: 'optimized-tab',
        items: [
            {
                iconCls: 'home',
                title: 'Black',
                xtype: 'Black',
                  styleHtmlContent: true
            },
             {
                iconCls: 'compose',
                title: 'Blue',
//                styleHtmlContent: true,
                scrollable: true,
                xtype: 'Blue'
            },

            {
                 iconCls: 'list',
                title: 'Transaction',
                styleHtmlContent: true,
                scrollable: true,
                xtype: 'CRM'
            },
               {
                iconCls: 'e2af',
                title: 'Setup',
                styleHtmlContent: true,
                scrollable: true,
                xtype: 'Setup'


            },

//              {
//                iconCls: 'settings',
//                title: 'Test',
//                styleHtmlContent: true,
//            
//                xtype: 'test',
//            }



        ]
    }
});

So inside my tab panel how can I directly apply the iconcls to the specific icon?

Answer 1

I've recently created this new tool that will help you to generate the SASS file for your Sencha Touch apps. The README explains the steps for creating icons at the Ico Moon web site and converting the Ico Moon project for use in Sencha Touch.

I found that I often wanted to add or remove icons from the font file and this tool make the process much simpler and faster.

Answer 2

In your SASS stylesheet you can include your new icons using the following:

@include icon("<icon name>"  , "<icon character>", "<font name>");

You can then add the icon to a button's iconCls by using the you used in the mixin.

IcoMoon should display the character that each of your icons are assigned to so you can just paste it in.