Jump to content

Icone Sur Le Menu


Recommended Posts

Hello plaisirmarine,

Je mettrai une classe au li du menu et mettre un fond à cette classe dans le CSS.

 

J'explique...

 

Pour ce faire, il faut modifier la fonction generateCategoriesMenu de blocktopmenu.php. en ajoutant l'id de la catégorie à la classe du li ce qui te permettra de faire la différence dans le CSS.

$html .= '<li'.(($this->page_name == 'category'
	&& (int)Tools::getValue('id_category') == (int)$category['id_category']) ? ' class="sfHoverForce"' : '').'>';

remplacé par 

$html .= '<li class="cat. (int)$category['id_category']" '
.(($this->page_name == 'category'&& (int)Tools::getValue('id_category') == (int)$category['id_category']) ? ' " sfHoverForce"' : '').'>';

et mettre dans le CSS 

 

.cat1 {background:url(img/icone1.jpg)

.cat2 {background:url(img/icone2.jpg)

....

 

Voilà. Bonne chance.

 

Guillaume

Share this post


Link to post
Share on other sites

Moi j'ai utiliser "title" sur le css 

 

 

Exemple avec les icons Font Awesome sur le theme default-bootstrap

 

Edité superfish-modified.css dans themes\votre-theme\css\modules\blocktopmenu\css\superfish-modified.css

 

A la fin du ficher css ajouter ce code pour test :

/* Icon du menu */

.sf-menu > li > a[title="ici le titre de votre catégorie"]::before{
		font-family: 'FontAwesome';
		font-size:25px;
		margin-right:5px;
		content:"\f015";
		vertical-align: middle;
	}

Remplacer "ici le titre de votre catégorie" par le titre de votre catégorie en respectent les majuscules et espaces si il y en a et sauvegarder.

 

Vider le cache et visualiser

 

La liste des icons disponible peut être visualiser ici

 

Vous pouvez aussi utiliser cette technique avec d'autre iconsFont 

 

Si vous avez besoin de plus détail n’hésiter pas   :D

  • Like 1

Share this post


Link to post
Share on other sites

  • 6 months later...

Tres bonne methode

 

  • .sf-menu > li > a[title="ici le titre de votre catégorie"]::before{
  •         font-family: 'FontAwesome';
  •         font-size:25px;
  •         margin-right:5px;
  •         content:"\f015";
  •         vertical-align: middle;
  •     }

On peut ajouter une image de la categorie avec la propriete background.

 

Merci pour l'info

Share this post


Link to post
Share on other sites

  • 1 year later...

Pour faire marcher sur 1.7 j'ai fait comme ça :

#header .top-menu > li:nth-child(1)::before{
		font-family: 'FontAwesome';
		font-size:60px;
		margin-left:37px;
		content:"\f0b1";
		vertical-align: middle;
	}
  .top-menu
  {
    margin-top:20px;
  }

 

Share this post


Link to post
Share on other sites

  • 8 months later...
  • 5 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More