This topic contains 1 reply, has 2 voices, and was last updated by Sean Sean 3 years, 1 month ago.

FontAwesome Sizing


  • mwsasser
    Participant

    Posts: 17
    Member Reply #617

    Someone posted in the Themeforest support about issues with sizing Fontawesome.  I’m also have a lot of trouble getting fa-2x, fa-3x, fa-4x, fa-5x to work properly.  Only fa-lg ever seems to work.

    Will the suggestions you made work in components-rounded.css as well?  If not can you post a fix here?  I am using Admin Theme 2 if that is important.

    • This topic was modified 3 years, 1 month ago by  mwsasser.
    • This topic was modified 3 years, 1 month ago by  mwsasser.
    Sean
    Sean
    Keymaster

    Posts: 4435
    Support Staff Reply #629

    Hi :),

    Yes, that solution will work for components.css, components-rounded.css and components-md.css(the material design components).

    As a quick fix you can update ‘Fontawesome Icons’ part in components.css, components-rounded.css and components-md.css as shown below:

    /***
    Fontawesome Icons
    ***/

    [class^=”fa-“]:not(class^=”fa-stack”), /* modified */
    [class^=”glyphicon-“],
    [class^=”icon-“],
    [class*=” fa-“]:not(class*=” fa-stack”), /* modified */
    [class*=” glyphicon-“],
    [class*=” icon-“] {
    display: inline-block;
    margin-top: 1px;
    font-size: 14px;
    *margin-right: .3em;
    line-height: 14px;
    -webkit-font-smoothing: antialiased;
    }

    /* Icon sizing */
    .fa-lg:not(.fa-stack), /* modified */
    .icon-lg {
    font-size: 16px !important;
    }

    That should solve the issue.

    Thanks.

     

Tagged: 

You must be logged in to reply to this topic.