Joomla Templates Club 406,261 posts

[nilzaris Friend nilzarisJoin date: June 2006Posts: 29Downloads:150Uploads:7 Thanks: 7]

#932829

Hi
I tried to show a icon beside a menu item as shown in: https://www.joomlart.com/video-tutorials/t3-framework/megamenu-configuration
But this don’t work. What can I do for to show a icon in only one item?
The site is http://www.thefoodspace.com

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#932903

Hi there

Let’s say you want to show the home icon instead to show the home text

Then you need to add new code to your template using custom.css file

add this to the file :

.navbar-default .navbar-nav > .item-home {
  text-indent: -9999em;
  position: relative;
  padding-left: 0;
  padding-right: 70px;
  width: 48px;
  text-align: center;
}
.navbar-default .navbar-nav > .item-home .fa {
  text-indent: 0;
  position: absolute;
  left: 0;
  top: 12px;
  width: 48px;
  height: 48px;
  line-height: 50px;
  font-size: 23px;
  margin: 0;
}
.navbar-default .navbar-nav > .item-home .dropdown-menu ul li a {
  text-indent: 0;
}

Then go to template manager / edit your template / megamenu button at top and add the item-home in the extra class field and fa fa-home into icon field as showed in image below.

You can see result in second image

Best regards

---

Attachments:

1. 
2. 

[nilzaris Friend nilzarisJoin date: June 2006Posts: 29Downloads:150Uploads:7 Thanks: 7]

#933794

No. I need a icon next to the word. I need to install a ecommerce and for this I need a shopping cart icon…I send a sample.

---

Attachments:

1. 

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#933799

Then edit your menu item using megamenu feature and add in icon the font awesome icon corresponding to the icon cart

fa fa-shopping-cart

---

Attachments:

1. 
2. 

[nilzaris Friend nilzarisJoin date: June 2006Posts: 29Downloads:150Uploads:7 Thanks: 7]

#934244

Thanks! now is good.! the problem was the bootstrap icon I think, because the nomenclature is different. You tell me "fa fa-shopping-cart" of Font Awesome and I was using a Bootstrap "Glyphicon" with "glyphicon glyphicon-shopping-cart", although would be "Icon Glyphs" as you show in video of megamenu configuration. Although I do not know very well the difference, the nomenclature is totally different, that is called different icons.
Thanks you very much.

[Author]

Posts