Return to previous page

How to add icons near the words on the mobile menu?

This topic has 8 replies, 3 voices, and was last updated 1 years, 6 months ago ago by Tony Rodriguez

  • Avatar: PR
    PR
    Participant
    May 30, 2023 at 01:19

    Hello,

    https://xstore.8theme.com/elementor2/industrial-power-tools/

    How can we add icons near the words on the mobile menu?
    So for example, a shop icon nears the words “shop”?

    Thank you!

    #358026 Copied Theme version: 9.1.5
    7 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 30, 2023 at 05:59

    Hello, PR,

    Thank you for using our theme and for contacting us.

    You can easily add or remove menu icons by navigating to Dashboard > Appearance > Menus > Main Menu > 8Theme Shop page Option > Menu option. There you will find an icon library where you can select XStore icons and set the icon name before saving the settings.

    We have created a video for you to view for reference. Please take the time to watch it in its entirety. https://www.veed.io/view/8c71f473-85b7-426a-b9d4-46ca95501d9b?sharingWidget=true&panel=share

    OR

    You can create a new mobile menu by navigating to Appearance > Menus and selecting the menu under XStore > Theme Options > Header Builder > Mobile Menu.For reference, please refer to the following screenshots:https://postimg.cc/cvpfX9Sk, https://ibb.co/zJq7HVL, https://ibb.co/c3tYsvY, and https://ibb.co/ysgKpjx.

    If you would like to use XStore icons, please visit this page – https://xstore.8theme.com/xstore-icons/

    We hope this information is helpful.

    Best Regards,
    8Theme’s Team

    #358034 Copied
    Avatar: PR
    PR
    Participant
    May 30, 2023 at 06:24

    Hello Tony,

    thanks! always a great help.

    just curious if we decide to choose “font awesome”, what is that and how do you choose those icons etc.?

    #358036 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 30, 2023 at 07:45

    Hello, PR,

    Font Awesome is the Internet’s icon library and toolkit, used by millions of designers, developers, and content creators.
    Here are examples of FontAwesome 4.7 icons – https://fontawesome.com/v4/icons/
    and FontAwesome 5+ https://fontawesome.com/v5/search

    https://prnt.sc/XNaxQFoYzRNy + https://prnt.sc/oOqaOV8S1C_A > https://prnt.sc/UUiAs9dXsgS6 ( https://fontawesome.com/v4/icon/address-book )

    Best Regards,
    8Theme’s Team

    #358059 Copied
    Avatar: PR
    PR
    Participant
    May 30, 2023 at 08:04

    Hello Tony,

    Thanks!
    We are trying the 5+ version but are having troubles.

    Can you give an example with that version please?

    Thanks again in advance!

    #358066 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 30, 2023 at 12:28

    Hello, PR,

    In order for Font Awesome 5+ to work in the menu, you need to copy not only the icon name but also its style as shown in the screenshot https://prnt.sc/BlEwuds_HwUy
    We have done this so that the same icon can have different styles as shown in the screenshots below https://prnt.sc/DVDZ3Xd5WMEd https://prnt.sc/BlEwuds_HwUy https://prnt.sc/JqfCZSuxifrd
    You can also use animation for icons simply by adding classes as indicated in the screenshot https://prnt.sc/-w7Yy6QMCoiB

    Example – https://prnt.sc/K2N8lpyl2ul2 > https://prnt.sc/N-k51-RPPpm8
    fas fa-house

    Best Regards,
    8Theme’s Team

    #358153 Copied
    Avatar: PR
    PR
    Participant
    May 30, 2023 at 23:59

    Hello Rose,

    thank you very much, it worked!
    this topic can be closed.

    we thank you for the help!

    #358216 Copied
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    May 31, 2023 at 05:22

    Hello, @PR,

    Thank you very much for letting us know that our assistance was successful! We’re delighted to hear that the issue has been resolved. Your satisfaction is of utmost importance to us.

    This topic is closed.

    If you have any additional queries, please don’t hesitate to let us know. We’re here to help!

    Best Regards,
    8Theme’s Team

    #358226 Copied

  • Tagged: , , , ,

  • Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘How to add icons near the words on the mobile menu?’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Coffee Store – WordPress WooCommerce Theme
lazy-placeholder
Artmaxy Store – WordPress WooCommerce Theme
lazy-placeholder
Spice Store – WordPress WooCommerce Theme
lazy-placeholder
Jewelry Store – WordPress WooCommerce Theme
lazy-placeholder
Furniture Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Organic Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Yoga Accessories – WordPress WooCommerce Theme
lazy-placeholder
Kids Store – WooCommerce Theme
lazy-placeholder
Interior – WordPress WooCommerce Theme
lazy-placeholder
Tea Store – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.