Results 1 to 7 of 7

Thread: Button cls/iconCls does not work - Font Awesome

  1. #1

    Default Button cls/iconCls does not work - Font Awesome

    Hi together,

    I'm trying to set the icon of an Ext.button.Button with a css-class.

    The icon is from fontawesome.

    Here are the css classes:
    Code:
    .icon-add-projects {
        content : "\f067";
    }
    .icon-remove-projects { content : "\f068"; }
    The buttons are implemented in the bbar of a window:
    Code:
    bbar: [
                    { xtype: 'button', tooltip: this.L('addSelectionToGantt'), iconCls: 'icon-add-projects'                }, { xtype: 'button',  tooltip: this.L('removeSelectionFromGantt'),  iconCls/*(tried it with cls property too)*/: 'icon-remove-projects' } ]
    When I run this code, the buttons have no icons...The button element has the class in it's tag, but nothing happens, it's just an empty button.

    Empty Button.png


    I copied the css classes from my toolbar elements, where the icon gets shown.
    Code:
    //CSS
    .icon-refresh .x-tool-img:before { content : "\f021";}
    //JAVASCRIPT
    { tooltip: this.L('refreshData'), reference: 'refreshData', cls: 'icon-refresh' },
    toolbaritem.png


    Any suggestions? Thanks in advance

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    In Ext JS 6, you can require the font-awesome Cmd package in your app.json (if using Cmd) and then set iconCls : 'x-fa fa-refresh' on the button:

    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha Premium User
    Join Date
    Oct 2013
    Posts
    17

    Default

    Using this fiddle, when I change the version/theme to Ext JS 6.2.0.981 - Neptune, which is what we are using currently for our app, the icon no longer appears. This is the same behavior I am seeing when I follow these steps for our application.

    1) add font-awesome to requires array in app.json
    2) use iconCls config on the button as in this example, for a font-awesome icon

    Do I need to do something additional to include the font-awesome icons in Neptune theme?

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2014
    Posts
    81
    Answers
    1

    Default

    Have you found a solution ?

    Marten

    Quote Originally Posted by ints View Post
    Using this fiddle, when I change the version/theme to Ext JS 6.2.0.981 - Neptune, which is what we are using currently for our app, the icon no longer appears. This is the same behavior I am seeing when I follow these steps for our application.

    1) add font-awesome to requires array in app.json
    2) use iconCls config on the button as in this example, for a font-awesome icon

    Do I need to do something additional to include the font-awesome icons in Neptune theme?

  5. #5
    Sencha Premium User
    Join Date
    Oct 2013
    Posts
    17

    Default

    Quote Originally Posted by feldtAtDimap View Post
    Have you found a solution ?

    Marten
    I have not.

  6. #6

    Default

    how to update icon dynamically

  7. #7
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    21
    Answers
    2

    Default

    Quote Originally Posted by AvanishBajpai View Post
    how to update icon dynamically
    http://docs.sencha.com/extjs/6.2.1/c...hod-setIconCls either call this method from your controller (or you can bind it to a viewModel as well and update the viewModel)

Similar Threads

  1. Replies: 1
    Last Post: 3 Dec 2015, 9:19 AM
  2. Replies: 1
    Last Post: 31 Mar 2015, 2:58 AM
  3. Font Awesome
    By ssamayoa in forum Sencha Architect 2.x: Help & Discussions
    Replies: 14
    Last Post: 17 Mar 2015, 12:42 AM

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
  •