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

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

  • [RÉGLÉ] 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

  • #2
    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.

    Commentaire


    • #3
      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
      Cordialement,
      carabao

      Site dédié à la caravane & au camping: www.caravane-camping.be

      Commentaire


      • #4
        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}
        UP, le plugin universel à découvrir sur https//up.lomart.fr
        bgMax
        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire


        • #5
          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
          Manuel
          --------
          voileux.org

          Commentaire


          • #6
            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

            Commentaire


            • #7
              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
              Cordialement,
              carabao

              Site dédié à la caravane & au camping: www.caravane-camping.be

              Commentaire


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

                Je te remercie de ton aide.

                Bien à tous !!!

                Commentaire


                • #9
                  Bonjour

                  Tant mieux.

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

                  Site dédié à la caravane & au camping: www.caravane-camping.be

                  Commentaire


                  • #10
                    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

                    Commentaire

                    Annonce

                    Réduire
                    Aucune annonce pour le moment.

                    Partenaire de l'association

                    Réduire

                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X