can anyone help me include icons from pictos with app.scss ?

[new2st]

I just download sdk 2.2.0-b1, and I found the old function @include pictos-iconmask($name) is deprecated. So I replace with "@include icon($name)". I got some "strange" button icons like :
Sans titre.png however I just included settings3 and chat3 from pictos file.

Here's my app.scss:

$include-default-icons: false;


//import the sencha touch theme
@import 'sencha-touch/base';
@import 'sencha-touch/base/all';
@import 'sencha-touch/default';
@import 'sencha-touch/default/all'; 
 
@include icon('settings3');
@include icon('chat3');

And I use my icons like this :

 {
                xtype:'button', 
                iconCls: 'chat3',
                iconMask: true,
                align:'right'
            },
            {
                xtype:'button',
                iconCls: 'settings3', 
                iconMask: true,
                align:'right'
            },

All suggestions are welcome !

[markevans]

I upgraded to 2.2 to help with another problem. Now, several of my icons are behaving like this as well. In addition, my custom image icon is not working.

[markevans]

....

If you include the following css in your app, either in your index.html or probably better in the custom code section of your app.scss file, and change the "content" to the appropriate letter from the pictos website you can at least reliably use the ones they define there.

I have no idea whether we have access to more than this using pictos.

.x-button-icon.[iconCls_name_you_want]:before,.x-button .x-button-icon.[iconCls_name_you_want]: before {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    text-align:center;
        content:"D"
    }

The above is a white "x" in a black circle. I was able to get the "calendar" picto working this way as it does not currently work in 2.2b.

Pictos website with mapping is at http://pictos.cc/font/.

[BridgeSense]

I'm having the same issue, but my icons were bleeding vertically. The following fixed my issue. Perhaps something similar would help.

// fixes scewing of icons when docked
.x-button.x-docked-right, .x-button.x-docked-left {
	padding-top: 0.5em !important;
}

[new2st]

I tried your proposition, and I got my icons correctly shown. However, I can only put the icons available on the site http://pictos.cc/font/. in the content attribute.
now I've two questions;
1) how can we put an icon from the theme/pictos ?
2) if I want to put a customized icon made by myself, how can I do it ?

[koolll]

Got solution? can anyone post the full example? I facing same problem

[koolll]

I try tis

.x-button-icon.[member]:before,.x-button .x-button-icon.[member]: before {    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    text-align:center;
        content:"D"
    }

But when i try compass compile, it return error "Invalid css..."

[BridgeSense]

I tried your proposition, and I got my icons correctly shown. However, I can only put the icons available on the site http://pictos.cc/font/. in the content attribute.
now I've two questions;
1) how can we put an icon from the theme/pictos ?
2) if I want to put a customized icon made by myself, how can I do it ?

Wasn't sure if you were aware that pictos is already part of the Sencha Touch package. There are over 300 vector icons found in your touch build @ resources/themes/images/default/pictos

In ST 2.1.1 the icons need to be individually registered in your app.scss file. I hear this is unneeded in the latest release.

// For example:
@include pictos-iconmask(refresh1);

... will include refresh1.png with the project which afterwards can be used as such:

Ext.define('MyApp.view.WebToolbar', {
    extend: 'Ext.Toolbar',
    alias: 'widget.webtoolbar',


    config: {
        docked: 'top',
        items: [
            {
                xtype: 'button',
                docked: 'right',
                ui: 'plain',
                iconCls: 'delete',
                iconMask: true
            },
            {
                xtype: 'button',
                docked: 'right',
                ui: 'plain',
                iconCls: 'refresh1',
                iconMask: true
            },
            {
                xtype: 'button',
                docked: 'left',
                ui: 'plain',
                iconCls: 'arrow_left',
                iconMask: true
            }
        ]
    }


});

[new2st]

I try tis

.x-button-icon.[member]:before,.x-button .x-button-icon.[member]: before {    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    text-align:center;
        content:"D"
    }

But when i try compass compile, it return error "Invalid css..."

I'm sorry, but I don't find anything wrong, it seems correct your code...
I finally put just a line of code :
@include icon("chat2");
and it works. However, it's not for all icons in the pictos folder, some of them give a series of icons. For example, 'chat3' exists in the folder, but when I compile the scss, it gives a series of icons which represents 'c' 'h' 'a' 't' '3' on the site pictos. I included 'chat2' but in reality it shows 'chat3.png'...

[alexesc]

Anybody found how to include a custom pictos in version 2.2 ? My question is for st 2.2 and not 2.1, and for custom icon.