我的设计师已经为我完成了一个html页面。请参阅下面的html
<li><div aria-hidden="true" data-icon=""></div>Setting</li>
<li><div aria-hidden="true" data-icon=""></div>Black Button</li>
<li><div aria-hidden="true" data-icon=""></div>Blue Button</li>
<li><div aria-hidden="true" data-icon=""></div>Back</li>
<li><div aria-hidden="true" data-icon=""></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应用于特定图标？
答案 0 :(得分：0)
在您的SASS样式表中，您可以使用以下内容添加新图标：
@include icon("<icon name>" , "<icon character>", "<font name>");
然后，您可以使用mixin中使用的图标将图标添加到按钮的iconCls中。
IcoMoon应该显示您的每个图标所分配的角色，以便您可以将其粘贴。
答案 1 :(得分：0)
我最近创建了这个new tool，它可以帮助您为Sencha Touch应用生成SASS文件。 README解释了在Ico Moon网站上创建图标和转换Ico Moon项目以在Sencha Touch中使用的步骤。
我发现我经常想在字体文件中添加或删除图标，而这个工具可以让更多更简单，更快捷。