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

Why font awesome icons resizing don't work anymore?

  • zeb

    Posts: 6
    Member Reply #950


    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 4 years ago by  zeb.
    • This topic was modified 4 years ago by  zeb.
    • This topic was modified 4 years ago by  zeb.

    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 4 years ago by Sean Sean.

You must be logged in to reply to this topic.