Icone Sur Le Menu

[plaisirmarine]

bonjour,

 

Je désire ajouter sur mon menu (blocktopmenu) un icone en face chaque categorie.

pouvez vous m'aider à effectuer cette operation.

 

en vous remerciant 

[fourquet]

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

[AlexanderOs]

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  

[informatikadomicile]

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

[Antton]

Vous auriez une astuce pour faire marcher la manipulation sur 1.7? 

Merci,

Ab

[Antton]

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;
  }

 

[Julia44]

Est ce que cette technique est fiable d 'après vous? je suis sur 1.6.1.20

Merci

[jeromecollection]

Bonjour c'est nickel merci !
Pour les sous catégorie c'est possible aussi des icones ou a défaut une petit ▪ ... 

merci

PS sur PS1.6.1.X

Edited August 10, 2019 by jeromecollection (see edit history)