Alignez une image au texte d'un menu (Main menu)

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Andéa
    a répondu
    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

    Laisser un commentaire:


  • carabao
    a répondu
    Bonjour

    Tant mieux.

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

    Laisser un commentaire:


  • Andéa
    a répondu
    Bonjour et merci Caraboa j'ai trouvé une solution avec l'insertion par des fonts icon.

    Je te remercie de ton aide.

    Bien à tous !!!

    Laisser un commentaire:


  • carabao
    a répondu
    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 ?
    Dernière édition par carabao à 25/01/2023, 20h52

    Laisser un commentaire:


  • Andéa
    a répondu
    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.


    Cliquez sur l'image pour l'afficher en taille normale

Nom : chercher.png 
Affichages : 187 
Taille : 14,5 Ko 
ID : 2047108

    Cliquez sur l'image pour l'afficher en taille normale

Nom : reglage_menu.png 
Affichages : 156 
Taille : 137,0 Ko 
ID : 2047109



    J'ai dans mon head :


    Code HTML:
    <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" />
    Code:
    [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.


    Fichiers joints

    Laisser un commentaire:


  • ManuelVoileux
    a répondu
    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
    Bonjour tout le monde, je poste un samedi soir , mais rien d'urgent. Si vous le pouvez , profitez de ce week end prolongé. j'ai rajouté des icones de lien de menu (Merci daneel pour les icones personnalisées et fontello). Mais les icones sont décalées vers le bas par rapport au texte du lien. Voir image jointe. A
    Dernière édition par ManuelVoileux à 14/01/2023, 23h13

    Laisser un commentaire:


  • lomart
    a répondu
    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.
    Code:
    .sp-menu-item > a > img{margin-top:10px}

    Laisser un commentaire:


  • carabao
    a répondu
    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/)


    Code:
    [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, ....)


    Dernière édition par carabao à 14/01/2023, 01h06

    Laisser un commentaire:


  • bird
    a répondu
    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.

    Laisser un commentaire:


  • Alignez une image au texte d'un menu (Main menu)

    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 :

    Code HTML:
    <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

Annonce

Réduire
Aucune annonce pour le moment.

Partenaire de l'association

Réduire

Hébergeur Web PlanetHoster
Travaille ...
X