This topic contains 9 replies, has 4 voices, and was last updated by Sean Sean 3 years, 6 months ago.

Font Awesome Icons shifted up in 3.8


  • sumpton
    Participant

    Posts: 4
    Member Reply #894

    Hi Support,

    I updated the theme to 3.8 and I am using components-rounded.css. The icons in the login form has shifted up. I am not sure what has changed, but toggling off the

    margin-top: 1px gets the icon close to center.

    I see the same problem here

    ./metronic_v3.8.0/theme/templates/admin3/login_3.html


    ivanhalen
    Participant

    Posts: 16
    Member Reply #922

    +1

    The same problem is in other pages too:

    1. /theme/templates/admin/page_contact.html
    2. /theme/templates/admin/extra_search.html
    3. /theme/templates/admin/form_controls.html
    4. etc..

    Removing the margin-top: 1px from the icon(s) solves the problem


    sumpton
    Participant

    Posts: 4
    Member Reply #923

    Hi @ivanhalen, I am pleased I am not alone with this bug.

    Another thread led me to this recent change log

    http://keenthemes.com/metronic/changelog/

    Perhaps the problem stems from changes relating to

    <span style=”color: #555555; font-family: Hind, ‘Helvetica Neue’, Helvetica, sans-serif; line-height: 28px;”>”fontawesome fa-stack class issue”</span>

    Thanks for pointing out that this is more than “admin3”

    It is strange they set

    margin-top: 1px in components-rounded.css (1582) which overrides

    margin: 11px 2px 4px 10px (3572)

    what did change were some class exceptions that I find confusing to follow

    [class^=”fa-“]:not(.fa-stack) (1582) and

    [class*=” fa-“]:not(.fa-stack) (1585)

    so I am not sure the best fix.

     

     

     

     


    ivanhalen
    Participant

    Posts: 16
    Member Reply #925

    I’m sure they’ll notice this bug and fix it ASAP 🙂

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #928

    Hi :),

    Thanks for reporting this issue. We are investigating it and will provide the update asap.

    Thanks.


    kavika
    Participant

    Posts: 8
    Member Reply #932

    +1 looking forward to the update…

    Certainly can see it in the online preview as well: http://www.keenthemes.com/preview/metronic/theme/templates/admin/login_3.html, for example.


    kavika
    Participant

    Posts: 8
    Member Reply #933

    I would add that in my case that same block referred to (components-rounded.css:1585) also overrides the font size classes.  So for example,

    fa fa-2x fa-globe

    In the inspector, one can see that the font-size gets overridden (both the font-awesome.min.css and components-rounded.css:1640).

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #971

    Hi :),

    Just to update on the issue. Latest v3.8.1 fixes the margin-top issue but the icon size classes issue remained open. In the main time you can use below css code in your custom.css file. In the next update will fix this issue properly.

    Here is the hot fix to be added in custom.css  for a time being:

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

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

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

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

    Thanks for your patience.


    kavika
    Participant

    Posts: 8
    Member Reply #983

    3.8.1 has certainly fixed the shifted up issue for me, and the hotfix works too, thanks for the quick turnaround.

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #990

    Awesome! You are welcome 🙂

You must be logged in to reply to this topic.