Results 1 to 5 of 5

Thread: Increase size of a specific font awesome icon and change color

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2016
    Posts
    32

    Default Increase size of a specific font awesome icon and change color

    Hi,


    I want to increase the size of a specific font awesome icon that I am using. I also want to change its color. I am aware that I can change the color of all glyphs using -
    Code:
    $menu-glyph-color:dynamic(#008000);
    But that will change the color of all icons. I want to increase icon size and change color a specific icon.

    I am using the icon as follows-
    Code:
    iconCls: 'x-fa fa-plane', 
    iconAlign: 'top'
    Framework: ExtJS 6.5.3 Modern

    Kindly suggest.


    Thanks,
    Suman

  2. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,005
    Answers
    5

    Default

    Hi there Suman- I am sending this over to the support team to look into. It may take some time as there are many other tickets waiting for a response. I appreciate your patience while we work diligently to get you some assistance.

    Thanks,

    Michele

  3. #3
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    569
    Answers
    7

    Default

    Hello Suman,

    You can add class to icon and provide font size there
    iconCls: 'x-fa fa-plane size',


    //css
    .size{
    font-size:3em;
    }

    Regards,
    Kumar
    Sencha Support.

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2016
    Posts
    32

    Default

    Hi Kumar,

    This solution doesn't seem to work.

    Here is the fiddle.


    Thanks & Regards,
    Suman

  5. #5
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    569
    Answers
    7

    Default

    Hi Suman,

    you're targeting the wrong element with your css, font-icons are inserted with the ':before' pseudo-element
    Updated your fiddle with this code


    .x-button .size:before{
    font-size: 20px;
    }


    Please check :
    https://fiddle.sencha.com/#fiddle/2mrd&view/editor

    Regards,
    Kumar
    Sencha Support.

Similar Threads

  1. Change color of a icon-font
    By Tioecomp in forum Ext: Q&A
    Replies: 2
    Last Post: 12 Nov 2013, 2:24 AM
  2. Change color of a icon-font
    By Tioecomp in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 7 Nov 2013, 4:03 AM
  3. Replies: 3
    Last Post: 20 Dec 2012, 2:42 PM
  4. NumberField, how to change the font-size and font-color
    By liondev in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 7 Apr 2011, 11:39 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
  •