bootstrap icon block topmenu

[alfredopacino]

hi there is a way to use fonticons in topmenu?

[vekia]

check this (review topic, start from post below)

http://www.prestashop.com/forums/topic/288624-imageicon-in-category-menu/?do=findComment&comment=1606365

[alfredopacino]

wow, i think that's the most unfriendly use of font icon in the world

 

thanks anyway, im glade you find the solution

 

ps:don't you think a fonticon support to topmenu block in BO could be useful (next upgrade i mean)?

Edited March 31, 2014 by alfredopacino (see edit history)

[vekia]

it will be great but... it will be a little hard to achieve, so i don't think so that it will be developed so fast maybe in the future someone like me will develop it on github...  great idea!

[alfredopacino]

it will be great but... it will be a little hard to achieve, so i don't think so that it will be developed so fast maybe in the future someone like me will develop it on github...  great idea!

 

honestly i dont think its so hard, im too newbie in PS for doing that, but im a php developer.

maybe could be useful for you see the T3-Framework Megamenu solution.

see?kinda easy 

Edited March 31, 2014 by alfredopacino (see edit history)

[vekia]

well, i thought about a bit complex solution

it will be much better to define it in controller for each category,

then you will be able to use it anywhere you want in the shop, not only in block top menu

[alfredopacino]

sorry i saw your link but i'm not sure where the correct code is, can you post here? if possible for menu item as link and as categories both

[alfredopacino]

i tried to use this code

http://www.prestashop.com/forums/topic/288624-imageicon-in-category-menu/?do=findComment&comment=1606307

 

and i save the module from BO, nothing changed

[vekia]

an you show the code? and also where exactly you want to display icon? everything depends on it!

[alfredopacino]

i want to do that

[alfredopacino]

up?

[vekia]

okay but what is your code that you used?

and where you used it? how?

can you show it?

[alfredopacino]

okay but what is your code that you used?

and where you used it? how?

can you show it?

 

blocktopmenu.php

row 540th

doesn't work even like that, no conditions, i added just the icon

$this->_menu .= '<li '.$selected.'>
				<i class="fa fa-envelope-o"></i>';
				$this->_menu .= '<a href="'.$links[0]['link'].'">'.$cms->meta_title.'</a>';
				$this->_menu .= '</li>';

Edited April 27, 2014 by alfredopacino (see edit history)

[vekia]

hello

 

and your font-awesome libraries are included to your theme?

im asking because i see that you use some non default solution

[alfredopacino]

hello

 

and your font-awesome libraries are included to your theme?

im asking because i see that you use some non default solution

 

what you mean non default? im using the default template, font-awesome works fine.

[ZinC]

Doesn't that require modifying css too? I'm working on modifying top menu in default-bootsrap theme and saw the following code in superfish-modified.css that suppose to show a "+" and "-" icon. But when do these icons show up?

  @media (max-width: 767px) {
    .sf-menu > li {
      float: none;
      position: relative;
      border-right: none; }
      .sf-menu > li span {
        position: absolute;
        right: 6px;
        top: 20px;
        width: 30px;
        height: 30px;
        z-index: 2; }
        .sf-menu > li span:after {
          font-family: "FontAwesome";
          content: "\f067";
          font-size: 26px; }
        .sf-menu > li span.active:after {
          content: "\f068"; } }

[prestamax]

I noticed that the default bootstrap theme still uses fontawesome 3.2.1 which uses the .icon class (not .fa)
http://fortawesome.github.io/Font-Awesome/3.2.1/icons/

So if you add the relevant class icon- to an element and give it font-family "FontAwesome" the icon should show up.

[ZinC]

I noticed that the default bootstrap theme still uses fontawesome 3.2.1 which uses the .icon class (not .fa)

http://fortawesome.github.io/Font-Awesome/3.2.1/icons/

 

So if you add the relevant class icon- to an element and give it font-family "FontAwesome" the icon should show up.

I guess that's beacause they still take into account old "retarted" browsers, i.e IE.

And to answer my question, I think that css code is for mobile devices.. it's been a while I haven't worked with web design..

[alfredopacino]

up?i'm stuck

[ZinC]

up?i'm stuck

If you're trying to have a home icon instead of text-only, "Home", it's very easy. Vekia did post a css code for this but I can't find his post. He suggested to add the code in global.css but I added it in superfish-modified.css instead and it worked for me.

For me, and I think this is how it is in default setup of prestashop with the default bootstrap theme, the first menu item "Home" was listed as a category link. I deleted this item and added a new link to the frontpage, "/" or whatever is your path, in Modules > Top horizontal menu > Add a new link. Leave "label" blank and click Add. Now add your new item from "Available items" to "Selected items" and move it to the top. Save and proceed with css code:

  /***************** Home icon instead of text **********************************************/
  .sf-menu li:first-child a:before{
  color:white!important;
  content: "\f015";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 33px;
  line-height: 10px;
}

.sf-menu li ul li a:before{
  content:none!important;
}
/***********************************************************************************************/

Hope it works.

[alfredopacino]

ok it works,

for the indicization it would be better find the way to let be the label contains "home"..any idea?

 

anyway this is my code, it covers the mobile/tablet size too (with content"home") 

/*-------home icon---------*/
  @media (min-width: 768px) {
  .sf-menu>li:first-child a:before{
  color:white!important;
  content: "\f015";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 21px;
  line-height: 10px;
font-weight: normal;
}

.sf-menu>li ul li a:before{
  content:none!important;
[spam-filter]
  @media (max-width: 768px) {
    .sf-menu>li:first-child a:before{
	  content: "Home";
}
}
/*-------home icon---------*/

Edited May 11, 2014 by alfredopacino (see edit history)