Icône Font Awesome à l'intérieur de l'élément d'entrée de texte


136

J'essaie d'insérer une icône d'utilisateur dans le champ de saisie du nom d'utilisateur.

J'ai essayé l'une des solutions de la question similaire en sachant que la background-imagepropriété ne fonctionnera pas puisque Font Awesome est une police.

Voici mon approche et je ne parviens pas à afficher l'icône.

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

J'ai déclaré la police de caractères dans la police par défaut.

 @font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
 }

Que veux-tu savoir? Quelle est la question / erreur?
allcaps

@allcaps Oups ... J'admets qu'il n'y a aucun moyen d'identifier l'erreur que je rencontre en regardant simplement mon message d'origine. J'ai édité un peu.
Seong Lee

Voir ma réponse mise à jour.
allcaps

Réponses:


108

Vous avez raison. : avant et: après le pseudo contenu n'est pas destiné à fonctionner sur le contenu remplacé comme les éléments imget input. L'ajout d'un élément d'habillage et la déclaration d'une famille de polices est l'une des possibilités, tout comme l'utilisation d'une image d'arrière-plan. Ou peut-être qu'un texte d'espace réservé html5 répond à vos besoins:

<input name="username" placeholder="&#61447;">

Les navigateurs qui ne prennent pas en charge l'attribut d'espace réservé l'ignoreront simplement.

METTRE À JOUR

Le contenu avant sélecteur sélectionne l'entrée: input[type="text"]:before. Vous devez sélectionner l'emballage: .wrapper:before. Voir http://jsfiddle.net/allcaps/gA4rx/ . J'ai également ajouté la suggestion d'espace réservé où le wrapper est redondant.

.wrapper input[type="text"] {
    position: relative; 
}

input { font-family: 'FontAwesome'; } /* This is for the placeholder */

.wrapper:before {
    font-family: 'FontAwesome';
    color:red;
    position: relative;
    left: -5px;
    content: "\f007";
}

<p class="wrapper"><input placeholder="&#61447; Username"></p>

Se retirer

Font Awesome utilise la zone d'utilisation privée Unicode (PUA) pour stocker les icônes. Les autres caractères ne sont pas présents et reviennent à la valeur par défaut du navigateur. Cela devrait être le même que pour toute autre entrée. Si vous définissez une police sur les éléments d'entrée, fournissez la même police de secours pour les situations où nous utilisons une icône. Comme ça:

input { font-family: 'FontAwesome', YourFont; }

4
L'utilisation de votre méthode d'espace réservé fonctionne. Le problème est que le texte normal (sans icône) ne correspond pas à la police du reste de la page et s'affiche en tant que serif par défaut du navigateur. Un moyen de contourner cela?
harryg

6
Font Awesome utilise la zone d'utilisation privée Unicode (PUA) pour stocker les icônes. Les autres caractères ne sont pas présents et reviennent à la valeur par défaut du navigateur. Cela devrait être le même que pour toute autre entrée. Si vous définissez une police sur des éléments d'entrée quelque part, puis fournir la même police que solution de repli pour les situations où nous utilisons une icône: input { font-family: 'FontAwesome' YourFont; }. est-ce que cela aide? Vous pouvez toujours poser une nouvelle question.
allcaps

1
@allcaps la recommandation d'utiliser une famille de polices de secours pour l'espace réservé fonctionne WONDERS !! Je n'ai pas pensé à changer la police par une solution de secours. Pouvez-vous mettre à jour votre réponse pour inclure une police de secours pour les futurs utilisateurs? Merci!
ProfileTwist

1
où puis-je trouver la liste des codes. je veux dire fa-utilisateur à & # 61447;
Elyor

1
@Elyor: Vous n'avez pas besoin d'utiliser l'entité html. Si votre projet est UTF-8, vous pouvez simplement copier-coller le glyphe Font awesome. Il apparaîtra probablement comme un bloc dans votre éditeur de code, mais ce n'est pas grave. Vous pouvez également utiliser l'un des nombreux convertisseurs d'entités-unicode-html en ligne.
allcaps

123

Production:

entrez la description de l'image ici

HTML:

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

CSS:

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(Ou)

Production:

entrez la description de l'image ici

HTML:

<div class="input-wrapper">
     <input type="text" />
 </div>

CSS:

<style type="text/css">
    .input-wrapper {
        display:inline-block;
        position: relative
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f274';
        position: absolute;
        right: 6px;
    }
</style>

2
C'était un excellent conseil sur l'utilisation de font-awesome avec une zone de texte.
Dimanche

Est-il possible de rendre cette icône cliquable?
FrenkyB

5
@FrenkyB, oui. <span class = "fa fa-info-circle errspan" onclick = 'YOUR_FUNCTION ()'> </span>
Palanikumar

2
Le réglage z-index: 1fera que l'entrée sous-jacente attrapera le focus lorsque vous cliquez sur l'icône - ce que vous voudrez peut-être par exemple lors de l'ajout d'un sélecteur de date.
romaricdrigon le

Fonctionne bien pour moi mais je ne l'ai pas utilisé position: relative(les marges négatives n'en ont pas besoin) ni z-index(dès que l'élément est rendu après l'entrée)
Pierre de LESPINAY

24

Vous pouvez utiliser un wrapper. Dans le wrapper, ajoutez l'élément font awesome i et l' inputélément.

<div class="wrapper">
    <i class="fa fa-icon"></i>
    <input type="button">
</div>

puis définissez la position du wrapper sur relative:

.wrapper { position: relative; }

puis définissez la iposition de l' élément sur absolue, et définissez-lui l'emplacement correct:

i.fa-icon { position: absolute; top: 10px; left: 50px; }

(C'est un hack, je sais, mais ça fait le travail.)


2
Pourquoi avons-nous besoin d'un .wrapper là-bas?
Ashfaque Rifaye

D'après ce que je comprends, les éléments absolus sont placés par rapport à l'ancêtre «positionné» le plus proche. Position: relative signifie que le wrapper est «positionné» (il pourrait aussi avoir été absolu, fixe ou collant). Si vous ne le faites pas, l'icône sera positionnée de manière absolue par rapport à un autre élément plus haut dans le dom (ou si aucun élément positionné n'est trouvé, par rapport à la fenêtre).
Jaqen H'ghar

20

Cette réponse fonctionnera pour vous si vous avez besoin des conditions suivantes remplies (aucune des réponses actuelles ne remplit ces conditions):

  1. L'icône est à l' intérieur de la zone de texte
  2. L'icône ne doit pas disparaître lorsque le texte est entré dans l'entrée, et le texte entré va à droite de l'icône
  3. Cliquez sur l'icône pour mettre en évidence l'entrée sous-jacente

Je crois que 3 est le nombre minimal d'éléments HTML pour satisfaire ces conditions:

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>


4
Meilleure réponse pour avoir l'icône dans le champ de saisie, où l'icône reste visible pendant que l'utilisateur tape.
ObjectiveTC

top: calc (50% - 0.5em) suppose que votre étiquette a une hauteur de
1em

1
@drichar - Je viens de tester, cela fonctionne toujours avec n'importe quelle hauteur d'étiquette. Tant que vous n'alignez pas verticalement le texte de l'étiquette dans l'étiquette (ce qui n'est pas la valeur par défaut) Comme il s'aligne vers le haut par défaut, une étiquette plus grande fonctionnera toujours correctement. J'ai également testé avec différentes tailles de police sur l'étiquette et l'entrée. Cela semble fonctionner dans tous les scénarios.
Skeets

@ SkeetsO'Reilly Je suis corrigé. Je les confond avec rem. 0,5em est la moitié de la taille de la police. Excellente solution, je l'utilise dans un projet (juste en utilisant un SVG personnalisé, pas FA, qui n'a pas de taille de police, ce qui a conduit à mon problème de positionnement et à un commentaire mal informé)
drichar

14

Pas besoin de coder beaucoup ... il suffit de suivre les étapes suivantes:

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

vous pouvez trouver les liens vers l'Unicode ( fontawesome ) ici ...

FontAwesome Unicode pour les icônes


Que faire si j'utilise déjà une autre famille de polices pour l'espace réservé? alors cela ne fonctionnera pas. Existe-t-il un moyen de faire en sorte que le texte "Recherche" dans "& # xf002 Recherche" utilise une police personnalisée et Unicode utilise toujours la police fontawesome?
Sushmit Sagar

6

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>


Salut, veuillez joindre une petite explication à votre solution.
Aditya Thakur

1
Cette réponse fonctionnera pour vous si vous avez besoin que les conditions suivantes soient remplies (aucune des réponses actuelles ne remplit ces conditions): L'icône est à l'intérieur de la zone de texte L'icône ne doit pas disparaître lorsque le texte est entré dans l'entrée, et le texte entré va à la droite de l'icône Cliquer sur l'icône devrait mettre en évidence l'entrée sous-jacente Je crois que 3 est le nombre minimal d'éléments HTML pour satisfaire les conditions
Ola Olushesi

5

Après avoir lu différentes versions de cette question et effectué des recherches, j'ai trouvé une solution assez claire et sans js. C'est similaire à la solution @allcaps mais évite le problème de la modification de la police d'entrée par rapport à la police principale du document.

Utilisez l' ::input-placeholderattribut pour styliser spécifiquement le texte de l'espace réservé. Cela vous permet d'utiliser votre police d'icônes comme police d'espace réservé et votre corps (ou autre police) comme texte d'entrée réel. Actuellement, vous devez spécifier des sélecteurs spécifiques au fournisseur.

Cela fonctionne bien tant que vous n'avez pas besoin d'une combinaison d'icône et de texte dans votre élément d'entrée. Si vous le faites, vous devrez accepter que le texte de l'espace réservé soit la police par défaut du navigateur (empattement simple sur le mien) pour les mots.

Par exemple
HTML

<p class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</p>

CSS

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}

Violon avec les sélecteurs préfixés du navigateur: http://jsfiddle.net/gA4rx/78/

Notez que vous devez définir chaque sélecteur spécifique au navigateur comme une règle distincte. Si vous les combinez, le navigateur l'ignorera.


Bien que ce soit une solution élégante, elle n'atteint pas le comportement attendu.
Olivier Refalo

En effet, il semble que les navigateurs Webkit soient les seuls à accepter font-familyce sélecteur pour le moment. Nous ne pouvons qu'espérer une acceptation plus généralisée à l'avenir.
harryg

5

J'ai trouvé le moyen le plus simple d'utiliser bootstrap 4.

<div class="input-group mb-3">
    <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-user"></i></span></div>
    <input type="text"/>
</div>

2

J'ai réussi ça comme ça

  form i {
    left: -25px;
    top: 23px;
    border: none;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
    color: #29a038;
  }
<form>

  <i class="fa fa-link"></i>

  <div class="form-group string optional profile_website">
    <input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website">
  </div>

  <i class="fa fa-facebook"></i>
  <div class="form-group url optional profile_facebook_url">
    <input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url">
  </div>

  <i class="fa fa-twitter"></i>
  <div class="form-group url optional profile_twitter_url">
    <input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url">
  </div>

  <i class="fa fa-instagram"></i>
  <div class="form-group url optional profile_instagram_url">
    <input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url">
  </div>

  <input type="submit" name="commit" value="Add profile">
</form>

Le résultat ressemble à ceci:

résultat

Note d'accompagnement

Veuillez noter que j'utilise Ruby on Rails, donc mon code résultant semble un peu explosé. Le code de vue dans slim est en fait très concis:

i.fa.fa-link
= f.input :website, label: false

i.fa.fa-facebook
= f.input :facebook_url, label: false

i.fa.fa-twitter
= f.input :twitter_url, label: false

i.fa.fa-instagram
= f.input :instagram_url, label: false

2

Pour moi, un moyen simple d'avoir une icône "dans" une entrée de texte sans avoir à essayer d'utiliser des pseudo-éléments avec une police géniale unicode, etc., est d'avoir l'entrée de texte et l'icône dans un élément wrapper que nous positionnerons par rapport, puis positionnez à la fois l'entrée de recherche et l'icône de police géniale absolue.

De la même manière que nous le faisons avec les images d'arrière-plan et le texte, nous le ferions ici. Je pense que c'est également bon pour les débutants, car le positionnement css est quelque chose qu'un débutant devrait apprendre au début de son parcours de codage, de sorte que le code est facile à comprendre et à réutiliser.

    <div class="searchbar-wrapper">
      <i class="fa fa-search searchbar-i" aria-hidden="true"></i>
      <input class="searchbar-input" type="search" placeholder="Search...">
    </div>

    .searchbar-wrapper{
      position:relative;
    }

    .searchbar-i{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 0 .5rem;
    }

    .searchbar-input{
      padding-left: 2rem;
    }

1

S'appuyant sur la suggestion allcaps. Voici la méthode d'arrière-plan géniale avec le moins de HTML:

<div class="wrapper"><input></div>

.wrapper {
    position: relative; 
}

input { padding-left: 20px; }

.wrapper:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 2px;
    left: 3px;
    content: "\f007";
}

1

Faites une icône cliquable pour se concentrer à l'intérieur de l'élément d'entrée de texte.

CSS

.myClass {
    font-size:20px;
    position:absolute; top:10px; left:10px;
}

HTML

<div>
    <label style="position:relative;">
         <i class="myClass fa fa-address-book-o"></i>
         <input class="w3-input" type="text" style="padding-left:40px;">
    </label>
</div>

Ajoutez simplement l'icône de votre choix à l'intérieur de la <i>balise, à partir de la bibliothèque Font Awesome et profitez des résultats.


0
<HTML>
<head>
<style>
.inp1{
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
}
</style>
</head>

<body>

<div class="inp1">          
<a href="#" class=""><i class="fa fa-search"></i></a>
</div>

2
Il sera plus utile à l'OP si vous publiez également des explications sur ce que fait ce bloc de code!
Kim

0

purement CSS

input[type=search] {
    min-width: 320px;
    height: 24px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    margin-top: 6px;
    background-image: url('/img/search.png');
    background-size: 16px;
    background-position: 280px;
    background-repeat: no-repeat;
}

1
Pouvez-vous expliquer votre réponse, s'il vous plaît?
E. Zeytinci

0

Ma solution était d'avoir un conteneur relatif autour du inputpour contenir l'icône. Ce conteneur externe a un ::afteravec l'icône souhaitée, positionné absoluteà l'intérieur du conteneur.

HTML:

<div class="button__outer">
    <input type="submit" class="button" value="Send"/>
</div>

Code SASS:

.button {
 display: inline-block;
 width: auto;
 height: 60px;
 line-height: 60px;
}

.button__outer {
    position: relative;
    display: inline-block;
    width: auto;

    &::after {
       position: absolute;
       right: 0;
       top: 0;
       height: 60px;
       line-height: 60px;
       width: 60px;
       font-family: 'FontAwesome', sans-serif;
       content: "\f054";
       color: #fff;
       font-size: 27px;
       font-weight: 700;
    }
}

0

Ma solution pour ajouter une icône de police géniale à l'intérieur de l'élément d'entrée. Voici un code simple pour ajouter une icône à l'intérieur de l'élément d'entrée. Copiez simplement le code ci-dessous et placez-le là où vous souhaitez l'ajouter. ou si vous voulez changer l'icône, mettez simplement votre code d'icône dans la <i> balise.

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.soft-codeon {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 50%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: linear-gradient(to right, #ec008c, #fc6767); 
  color: white;
  min-width: 20px;
  text-align: center;
}
.soft-field {
  width: 100%;
  padding: 10px;
  outline: none;
  border:2px solid #fc6767;
}
.soft-field:focus {
  border: 2px solid #ec008c;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="soft-codeon">
    <i class="fa fa-user icon"></i>
    <input class="soft-field" type="text" placeholder="Username" name="usrnm">
  </div>
  <div class="soft-codeon">
    <i class="fa fa-envelope icon"></i>
    <input class="soft-field" type="text" placeholder="Email" name="email">
  </div>


2
La réponse est utile, mais la phrase qui est du spam n'est pas autorisée. Si vous voulez avoir quelque chose comme ça, vous pouvez mettre un lien dans votre profil.
Makyen

Bien que cet extrait de code puisse résoudre la question, inclure une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondez à la question aux lecteurs à l'avenir, et que ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.
Clijsters

0

Parfois, l'icône n'apparaîtra pas en raison de la version Font Awesome. Pour la version 5, le css doit être

.dropdown-wrapper::after {
     content: "\f078";
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     color: #000;
     position: absolute;
     right: 6px;
     top: 10px;
     z-index: 1;
     width: 10%;
     height: 100%;
     pointer-events: none;
}

0

Moyen simple, mais vous avez besoin de bootstrap

 <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-envelope"></i></span> <!-- icon envelope "class="fa fa-envelope""-->
    </div>
    <input type="email" id="senha_nova" placeholder="Email">
  </div><!-- input-group -->

entrez la description de l'image ici


-1
::-webkit-search-cancel-button {
        height: 10px;
        width: 10px;
        display: inline-block;
        /*background-color: #0e1d3033;*/
        content: "&#f00d;";
        font-family: FontAwesome;
        font-weight: 900;
        -webkit-appearance: searchfield-cancel-button !important;
    }
    input#searchInput {
        -webkit-appearance: searchfield !important;
    }

<input data-type="search" type="search" id="searchInput" class="form-control">

-3

J'ai essayé les trucs ci-dessous et cela fonctionne vraiment bien HTML

input.hai {
    width: 450px;
    padding-left: 25px;
    margin: 15px;
    height: 25px;
    background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left;
    background-color: grey;
}
<div >

    <input class="hai" placeholder="Search term">

</div>


1
la question est d'utiliser des icônes de polices géniales
gaitat

-5

Pour travailler avec unicode ou fontawesome, vous devez ajouter un spanavec classcomme ci-dessous:

En HTML:

<span class="button1 search"></span>
<input name="username">

En CSS:

.button1 {
    background-color: #B9D5AD;
    border-radius: 0.2em 0 0 0.2em;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); 
    pointer-events: none;
    margin:1px 12px;    
    border-radius: 0.2em;    
    color: #333333;
    cursor: pointer;
    position: absolute;
    padding: 3px;
    text-decoration: none;           
}

1
cela ne mettra pas l'icône dans la saisie de texte
Gianfranco P.

-9
<!doctype html>
<html>
  <head>
    ## Heading ##
    <meta charset="utf-8">
      <title>
        Untitled Document
      </title>
      </head>
      <style>
        li {
          display: block;
          width: auto;
        }
        ul li> ul li {
          float: left;
        }
        ul li> ul {
          display: none;
          position: absolute;
        }
        li:hover > ul {
          display: block;
          margin-left: 148px;
          display: inline;
          margin-top: -52px;
        }
        a {
          background: #f2f2ea;
          display: block;
          /*padding:10px 5px;
          */
          width: 186px;
          height: 50px;
          border: solid 2px #c2c2c2;
          border-bottom: none;
          text-decoration: none;
        }
        li:hover >a {
          background: #ffffff;
        }
        ul li>li:hover {
          margin: 12px auto 0px auto;
          padding-top: 10px;
          width: 0;
          height: 0;
          border-top: 8px solid #c2c2c2;
        }
        .bottom {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m2 {
          border-left: none;
          border-right: none;
          border-bottom: solid 2px #c2c2c2;
        }
        li.selected {
          background: #6D0070;
        }
        #menu_content {
          /*float:left;
          */

        }
        .ca-main {
          padding-top: 18px;
          margin: 0;
          color: #34495e;
          font-size: 18px;
        }
        .ca-sub {
          padding-top: 18px;
          margin: 0px 20px;
          color: #34495e;
          font-size: 18px;
        }
        .submenu a {
          width: auto;
        }
        h2 {
          text-align: center;
        }
      </style>
      <body>
        <ul>
          <li>
            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 1
                </h2>
              </div>
            </a>
            <ul class="submenu" >
              <li>
                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_1
                    </h2>
                  </div>
                </a>
              </li>
              <li>

                <a href="#" class="sub_m2">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_2
                    </h2>
                  </div>
                </a>
              </li>
              <li >

                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_3
                    </h2>
                  </div>
                </a>

              </li>
            </ul>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 2
                </h2>
              </div>
            </a>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 3
                </h2>
              </div>
            </a>

          </li>
          <li>

            <a href="#"  class="bottom">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 4
                </h2>
              </div>
            </a>

          </li>
        </ul>
      </body>
</html>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.