1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    18
    Vote Rating
    1
    new2st is on a distinguished road

      0  

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

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


    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:
    Code:
    $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 :
    Code:
     {
                    xtype:'button', 
                    iconCls: 'chat3',
                    iconMask: true,
                    align:'right'
                },
                {
                    xtype:'button',
                    iconCls: 'settings3', 
                    iconMask: true,
                    align:'right'
                },
    All suggestions are welcome !

  2. ....

    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.

    Code:
    .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/.

  3. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    82
    Answers
    5
    Vote Rating
    1
    markevans is on a distinguished road

      0  

    Default Same problem.

    Same problem.


    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.

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    82
    Answers
    5
    Vote Rating
    1
    markevans is on a distinguished road

      0  

    Default This helps a bit...

    This helps a bit...


    ....

    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.

    Code:
    .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/.
    Last edited by markevans; 16 Mar 2013 at 2:45 PM. Reason: include link to pictos website.

  5. #4
    Sencha User
    Join Date
    Mar 2013
    Posts
    18
    Vote Rating
    2
    BridgeSense is on a distinguished road

      0  

    Default


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

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

  6. #5
    Sencha User
    Join Date
    Jan 2013
    Posts
    18
    Vote Rating
    1
    new2st is on a distinguished road

      1  

    Default


    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 ?


  7. #6
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default


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

  8. #7
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default


    I try tis
    Code:
    .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..."

  9. #8
    Sencha User
    Join Date
    Mar 2013
    Posts
    18
    Vote Rating
    2
    BridgeSense is on a distinguished road

      0  

    Default


    Quote Originally Posted by new2st View Post
    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:

    Code:
    
    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
                }
            ]
        }
    
    
    });

  10. #9
    Sencha User
    Join Date
    Jan 2013
    Posts
    18
    Vote Rating
    1
    new2st is on a distinguished road

      0  

    Default


    Quote Originally Posted by koolll View Post
    I try tis
    Code:
    .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'...

  11. #10
    Sencha User
    Join Date
    May 2012
    Location
    Colombia
    Posts
    46
    Answers
    2
    Vote Rating
    4
    alexesc is on a distinguished road

      0  

    Default


    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.