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

Why font awesome icons resizing don't work anymore?


  • zeb
    Participant

    Posts: 6
    Member Reply #950

    Hi,

    Seems I am missing something, but in newer theme versions font awesome icons resizing with css class fa-lg, fa-2x, fa-3x etc do not work anymore. For example fa-3x is overwritten from components.css with:

    [class^="fa-"]:not(.fa-stack), [class^="glyphicon-"], [class^="icon-"], [class*=" fa-"]:not(.fa-stack), [class*=" glyphicon-"], [class*=" icon-"] {
      display: inline-block;
      font-size: 14px;
      line-height: 14px;
      -webkit-font-smoothing: antialiased;
    }

    .. and fa-lg is overwritten:

    .fa-lg:not(.fa-stack), .icon-lg {
      font-size: 16px !important;
    }
    • This topic was modified 3 years, 3 months ago by  zeb.
    • This topic was modified 3 years, 3 months ago by  zeb.
    • This topic was modified 3 years, 3 months ago by  zeb.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #963

    Hi :),

    Thanks for your feedback on this issue. We will check it further and fix in the next update.

    In the main time you can use below hot fix in your custom.css:

    .fa-2x {
      font-size: 2em !important;}
    
    .fa-3x {
      font-size: 3em !important;}
    .fa-4x {
      font-size: 4em !important;}
    .fa-5x {
      font-size: 5em !important;}
    
    

    If you need any further assistance please let us know.

    • This reply was modified 3 years, 3 months ago by Sean Sean.

You must be logged in to reply to this topic.