Results 1 to 4 of 4

Thread: Button iconCls, can't use any other of the included 300 icons than the 11 defaults

    You found a bug! We've classified it as TOUCH-5399 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    53

    Default Button iconCls, can't use any other of the included 300 icons than the 11 defaults

    iconCls for buttons is just a big fail on Sencha's part.
    • The button doc doesn't state the available icons or how to include more icons.
    • The kitchen sink button icon demo states that 300+ icons are available, but you cannot include them, so it's just a blatant lie?
    • The blog post on themeing Sencha Touch is out-dated in regards to iconCls. It states to use '@include pictos-iconmask(‘nuclear’);' but you should use '@include icon('nuclear');'
      The video in the Theming Sencha Touch Guide section is wrong as well.
    • Including icons using '@include icon('nuclear');' doesn't do anything even though the icon is available in touch\resources\themes\images\default\pictos. Apparantly the image has to go somewhere else, but where?
    I'm tired of guessing. I have created a separate mechanism for putting icons on buttons. Not using Senchas built in stuff as just it doesn't work.

    This has been problematic since Sencha Touch 1.0 even. Still a time-sinkhole for us devs.

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    4,108

    Default

    I understand and empathize with your frustration regarding this issue.
    According to touch/resources/themes/stylesheets/sencha-touch/base/mixins/_Class.scss
    These are the icons that are mapped to a character and available to be added to Touch apps via @include icon('....')

    Code:
    @function icon-character-for-name($name) {
        // http://pictos.cc/font/
    
    
        // Row 1
        @if ($name == "anchor") { @return "a"; }
        @else if ($name == "box") { @return "b"; }
        @else if ($name == "upload") { @return "c"; }
        @else if ($name == "forbidden") { @return "d"; }
        @else if ($name == "lightning") { @return "e"; }
        @else if ($name == "rss") { @return "f"; }
        @else if ($name == "team") { @return "g"; }
        @else if ($name == "help") { @return "h"; }
        @else if ($name == "info") { @return "i"; }
        @else if ($name == "attachment") { @return "j"; }
        @else if ($name == "heart") { @return "k"; }
        @else if ($name == "list") { @return "l"; }
        @else if ($name == "music") { @return "m"; }
        @else if ($name == "table") { @return "n"; }
        @else if ($name == "folder") { @return "o"; }
        @else if ($name == "pencil") { @return "p"; }
        @else if ($name == "chat2") { @return "q"; }
        @else if ($name == "retweet") { @return "r"; }
        @else if ($name == "search") { @return "s"; }
        @else if ($name == "time") { @return "t"; }
        @else if ($name == "switch") { @return "u"; }
        @else if ($name == "camera") { @return "v"; }
        @else if ($name == "chat") { @return "w"; }
        @else if ($name == "settings2") { @return "x"; }
        @else if ($name == "settings") { @return "y"; }
        @else if ($name == "tags") { @return "z"; }
    
    
        // Row 2
        @else if ($name == "attachment2") { @return "A"; }
        @else if ($name == "bird") { @return "B"; }
        @else if ($name == "cloud") { @return "C"; }
        @else if ($name == "delete_black1") { @return "D"; }
        @else if ($name == "eye") { @return "E"; }
        @else if ($name == "file") { @return "F"; }
        @else if ($name == "browser") { @return "G"; }
        @else if ($name == "home") { @return "H"; }
        @else if ($name == "inbox") { @return "I"; }
        @else if ($name == "network") { @return "J"; }
        @else if ($name == "key") { @return "K"; }
        @else if ($name == "radio") { @return "L"; }
        @else if ($name == "mail") { @return "M"; }
        @else if ($name == "news") { @return "N"; }
        @else if ($name == "case") { @return "O"; }
        @else if ($name == "photos") { @return "P"; }
        @else if ($name == "power") { @return "Q"; }
        @else if ($name == "action") { @return "R"; }
        @else if ($name == "favorites") { @return "S"; }
        @else if ($name == "plane") { @return "T"; }
        @else if ($name == "user") { @return "U"; }
        @else if ($name == "video") { @return "V"; }
        @else if ($name == "compose") { @return "W"; }
        @else if ($name == "truck") { @return "X"; }
        @else if ($name == "chart2") { @return "Y"; }
        @else if ($name == "chart") { @return "Z"; }
    
    
        // Row 3
        @else if ($name == "expand") { @return "`"; }
        @else if ($name == "refresh") { @return "1"; }
        @else if ($name == "check") { @return "2"; }
        @else if ($name == "check2") { @return "3"; }
        @else if ($name == "play") { @return "4"; }
        @else if ($name == "pause") { @return "5"; }
        @else if ($name == "stop") { @return "6"; }
        @else if ($name == "forward") { @return "7"; }
        @else if ($name == "rewind") { @return "8"; }
        @else if ($name == "play2") { @return "9"; }
        @else if ($name == "refresh2") { @return "0"; }
        @else if ($name == "minus") { @return "-"; }
        @else if ($name == "battery") { @return "="; }
        @else if ($name == "left") { @return "["; }
        @else if ($name == "right") { @return "]"; }
        @else if ($name == "calendar") { @return "\005C"; }
        @else if ($name == "shuffle") { @return ";"; }
        @else if ($name == "wireless") { @return "'"; }
        @else if ($name == "speedometer") { @return ","; }
        @else if ($name == "more") { @return "."; }
        @else if ($name == "print") { @return "/"; }
    
    
    
    
        // Row 4
        @else if ($name == "download") { @return "~"; }
        @else if ($name == "warning_black") { @return "!"; }
        @else if ($name == "locate") { @return "@"; }
        @else if ($name == "trash") { @return "#"; }
        @else if ($name == "cart") { @return "$"; }
        @else if ($name == "bank") { @return "%"; }
        @else if ($name == "flag") { @return "^"; }
        @else if ($name == "add") { @return "&"; }
        @else if ($name == "delete") { @return "*"; }
        @else if ($name == "lock") { @return "("; }
        @else if ($name == "unlock") { @return ")"; }
        @else if ($name == "minus2") { @return "_"; }
        @else if ($name == "add2") { @return "+"; }
        @else if ($name == "up") { @return "{"; }
        @else if ($name == "down") { @return "}"; }
        @else if ($name == "screens") { @return "|"; }
        @else if ($name == "bell") { @return ":"; }
        @else if ($name == "quote") { @return "\""; }
        @else if ($name == "volume_mute") { @return "<"; }
        @else if ($name == "volume") { @return ">"; }
        @else if ($name == "question") { @return "?"; }
    
    
        // Backwards compat; icons that are not in the font
        @else if ($name == "arrow_left") { @return "["; }
        @else if ($name == "arrow_right") { @return "]"; }
        @else if ($name == "arrow_up") { @return "{"; }
        @else if ($name == "arrow_down") { @return "}"; }
        @else if ($name == "organize") { @return "I"; }
        @else if ($name == "bookmarks") { @return "I"; }
        @else if ($name == "loop2") { @return "r"; }
        @else if ($name == "star") { @return "S"; }
        @else if ($name == "maps") { @return "@"; }
        @else if ($name == "reply") { @return "R"; }
    
    
        @else {
            @return null;
        }
    }
    I will file a bug report to fix the discrepancies mentioned in your previous post.
    I will see what can be done to remove the unmapped icons from the pictos folder.
    If there is a icon that you want to use that is not mapped you will have to create a your own font icon. That process is described in the following pdf.
    Attached Files Attached Files
    Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  3. #3
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    4,108

    Default

    I filed TOUCH-5400 to have the unmapped icons removed from the SDK
    Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2013
    Location
    Bratislava, Slovakia
    Posts
    31

    Default

    This bug persists in ExtJS with the modern toolkit (which is the successor to Sencha Touch).As of ExtJS 6.0.0.415 the majority of icons from Picots font is not being displayed on buttons. Why are they not available? Also, why is the previous suggested solution to "remove unmapped icons", rather than map them properly?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •