Sencha touch customize icon css

Question

Мой дизайнер уже заполняет одну страницу html для меня. Пожалуйста, смотрите ниже HTML

<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', 
//   } 



     ] 
    } 
}); 

Так в моей вкладке панели, как я могу непосредственно применить iconcls к конкретной иконы?

Answer 1

Я недавно создал этот new tool, который поможет вам сгенерировать файл SASS для ваших приложений Сенча сенсорных , README объясняет шаги для создания значков на веб-сайте Ico Moon и преобразования проекта Ico Moon для использования в Sencha Touch.

Я обнаружил, что я часто хотел добавлять или удалять значки из файла шрифта, и этот инструмент делает процесс намного проще и быстрее.

Answer 2

В вашем SASS стилей вы можете включить ваши новые иконки, используя следующие:

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

Вы можете добавить значок в iconCls кнопка, используйте функцию вы использовали в Mixin.

IcoMoon должен показать характер, что каждый из ваших иконок назначается, так что вы можете просто вставить его в.