How to add text to the mobile menu Font Awesome icon or replace it?

  • Resolved Mr Ben X

    (@mr-ben-x)


    8 years, 2 months ago

    Hi,

    I’m using a child theme and I would like to either add the word ‘Menu’ to the Font Awesome icon (fa-bars) that appears in small browser windows and on mobile devices, or replace it entirely.

    What is the best way to achieve this and how can I define which font is used for the added word?

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • sarah semark

    (@tinkerbelly)

    8 years, 2 months ago

    Good call! The word “menu” makes hamburger buttons like this more understandable for users—using both is a great option. 🙂

    The most straightforward way is probably via CSS:

    .slicknav_menutxt::after {
    display: inline-block;
    content: 'Menu';
    margin-left: 10px;
    margin-top: 00;
    font-family: 'Lato', sans-serif;
}

    You could also copy the theme’s original header.php and add the “Menu” text to the file, but that’s a bit more work and would require more manual updating when updates to the theme are released.

    Thread Starter Mr Ben X

    (@mr-ben-x)

    8 years, 2 months ago

    Works like a charm!
    Thank you so much, Sarah!

    Ben 🙂

    sarah semark

    (@tinkerbelly)

    8 years, 2 months ago

    You’re welcome—happy to help! 🙂

    Fizzgigg

    (@fizzgigg)

    7 years, 9 months ago

    Sorry for bumping this, but I have tried this and there is no visible difference at all. Has recent updates to the theme made this css inaccurate?

    Fizzgigg

    (@fizzgigg)

    7 years, 9 months ago

    Ah, forget it, my mistake.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to add text to the mobile menu Font Awesome icon or replace it?’ is closed to new replies.

Tags