using front awesome in home icon in main menu

retrogamer01 · ‎03-16-2025

hello can any one advice me, I am trying to change the home link in the main menu to a font awesome home icon

my website is alchemsoul.co.uk

thanks in advance

devcoders · ‎03-16-2025

Hello @retrogamer01

Do you want it like this?

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

Huptech-Web · ‎03-17-2025

Hello @retrogamer01

There are two ways to add a home icon instead of the home text:

Using an icon inside the code (screenshot attached below).
Using CSS (code provided below).

If you prefer to use CSS, add the provided CSS code to your preferred CSS file. If you're unsure where to place it, you can add it inside the <head> tag in the theme.liquid file.

Let me know if you need any assistance!

<style>
/*CSS form dektop device*/    
#HeaderMenu-home .header__active-menu-item {
  font-size: 0;
}
#HeaderMenu-home .header__active-menu-item::before {
  content: "\f015";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display,inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  font-size: 15px;
}
/*CSS for the menu drawer to display a home icon.*/
.menu-drawer #HeaderDrawer-home {
  font-size: 0;
}
.menu-drawer #HeaderDrawer-home::before {
  content: "\f015";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display,inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  font-size: 15px;
}    
</style>

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

using front awesome in home icon in main menu

using front awesome in home icon in main menu

Community Blog Articles