[RÉGLÉ] Alignez une image au texte d'un menu (Main menu)

[Andéa]

Bonjour/soir,

Me revoilà.

J'aimerai que mon icone qui remplace mon texte dans le Main menu soit aligné verticalement à mon texte, il me faut du code CSS mais ma mémoire me fait défaut.

Avez vous une solution pour m'aider ? Je n'arrive pas à faire descendre ma loupe à la hauteur du texte.

Mon code est :

<nav><ul>...........
<li class="sp-menu-item">
<a href="/chercher" ><img src="/images/chercher.png" alt="Chercher" ></a>
</li>
</ul></nav>

Et voilà le résultat actuellement......



Andéa

[bird]

Bonjour,
Peut-être peux-tu tenter un text-align: center(!important); mais je pense qu'il serait préférable de l'ajouter dans les css de ton template.

[carabao]

bonsoir


Dans la configuration du lien de menu

type de lien: Classe d'icône de lien : iconperso recherche

une idée de css que j'ai mis en place sur mon site (voir le lien recherche avec la loupe : https://www.caravane-camping.be/)

[class^="iconperso-"], [class*=" iconperso-"] {
font-family: 'icomoon' !important;
display:inline;
position: relative;
padding-left: 1.25em;
}

.recherche::before {
font-family: "icomoon"; content: "\e986";
margin-right: 0.8rem;
}

Personnellement, j'ai utilisé des icônes icomoon mais on peut le faire avec d'autres bibliothèques d'icônes (font-awesome, ....)

[lomart]

Bonjour,

Pour centrer verticalement, sans connaitre le type de grid utilisé par le menu, on peut tenter d'ajouter une marge en haut de l'image. Attention, il faut la recadrer pour avoir uniquement l'image sans marge. Le code a ajouté au fichier css perso en testant pour trouver la bonne valeur.

.sp-menu-item > a > img{margin-top:10px}

[ManuelVoileux]

Bonjour tout le monde ,
il ya quelques mois j'avais eu le même souci et lomart m'avait donné une solution. Merci Lomart, pour ça et pour UP :-) Voyez la discussion

[Andéa]

Bonjour/soir,

Je reviens d'un déplacement ce WE et je vois tout vos messages et je tiens particulièrement à tous vous remercier.

Rien n'y fait...

Je vous mets 2 copies d'écran : une avec firebug intégré et l'autre de mes options possibles dans le main menu pour chercher (dans image du lien il y a une icône transparente 16 x 16).
Je pense qu'il faut que j'insère une ligne CCS avec une font awesome avec le symbole loupe pour arriver à être de la même taille et pas une image 16 x 16 qui s'avère trop haute mais je ne connais pas le code à insérer.








J'ai dans mon head :

<link href="/media/templates/administrator/atum/css/vendor/fontawesome-free/fontawesome.min.css?5.15.4" rel="stylesheet" />
.........
<link href="/templates/system/css/font-awesome.min.css" rel="stylesheet" />

[class^="icon-"], [class*=" icon-"] {
font-family: 'fontawesome' !important;
display:inline;
position: relative;
padding-left: 1.25em;
}

.recherche::before {
font-family: "fontawesome"; content: "\f202";
margin-right: 0.8rem;
}

Merci de votre aide.

[carabao]

Bonjour

Ce qui est étonnant, normalement, qu'avec cette méthode, la taille de l'icône suit automatiquement la taille de la police du lien.

dans le
"menu"
"lien"
"type de lien"
"Classe d'icône de lien" --> iconperso recherche

CSS

[class^="iconperso-"], [class*=" iconperso-"] { font-family: 'fontawesome' !important; display:inline; position: relative; padding-left: 1.25em; }

.recherche::before { font-family: "fontawesome"; content: "\e986"; margin-right: 0.8rem; }

Sinon le site est-il en ligne, pour essayer avec la console de trouver le problème ?

[Andéa]

Bonjour et merci Caraboa j'ai trouvé une solution avec l'insertion par des fonts icon.

Je te remercie de ton aide.

Bien à tous !!!

[carabao]

Bonjour

Tant mieux.

Et, qu'as-tu trouvé comme solution ? Merci

[Andéa]

Bonjour,

Le template a été monté avec Helix et il suffit de désactiver le texte (dans mainmenu) et placer une icône qui est dans une Font (toujours dans Helix mais dans la partie menu).
Sinon ce n'est pas bien aligné.

Cordialement et merci de votre aide