Mobile Hamburger icon appears as a rectangular with a X inside it!

  • Resolved cyrussh

    (@cyrussh)


    3 years ago

    Hello,

    I have an issue in my website and I hope some one can help out about it!

    The issue is all icon appears as normal but only Mobile Hamburger icon appears as a rectangular with a X inside it on all mobile and tablet devices. I have tested with different devices.

    I also have tried all possible and mentioned similar solutions in the forum but is still the same.

    https://docs.oceanwp.org/article/637-icons-missing-after-font-awesome-5-upgrade

    I have also tested with chrome and other browser on resizing Mobile icon appears as normal but only on Mobile and Tablet the issue happens.

    I use Elementor and I have deactivated other plugins and tested. There is nothing about plugin conflicts also.

    Is there any way to fix this by uploading SVG version of font awesome instead og=f icon or something that can solve this issue?

    Thank you indeed!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Abhishek

    (@abhikr781)

    Hello,

    kindly share the website URL and related snapshots of the issue.

    Thread Starter cyrussh

    (@cyrussh)

    I have solve the issue so, I mention it here that might help some one!

    Font awesome 5 needs to have a exact font weight to display properly.

    Simply add this code to your Appearance — customize — css:

    i.fa.fa-bars {
    font-family: “Font Awesome 5 Free”;
    font-weight: 900;
    }

    In case that the code does not work add !important to both css properties.

    That’s it!

    Abhishek

    (@abhikr781)

    Glad to hear that issue has been resolved and Thank you so much for sharing the solution with us.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile Hamburger icon appears as a rectangular with a X inside it!’ is closed to new replies.