Carattere Icona impressionante all'interno dell'elemento di input di testo


136

Sto cercando di inserire un'icona utente nel campo di immissione del nome utente.

Ho provato una delle soluzioni dalla domanda simile sapendo che la background-imageproprietà non funzionerà poiché Font Awesome è un font.

Quello che segue è il mio approccio e non riesco a visualizzare l'icona.

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

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

Ho la faccia del carattere dichiarata nel css fantastico del carattere predefinito, quindi non ero sicuro se l'aggiunta della famiglia di caratteri sopra fosse l'approccio giusto.

 @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');
 }

Cosa vuoi sapere? Qual è la domanda / errore?
allcaps

@allcaps Spiacenti. Ammetto che non c'è modo di identificare l'errore che sto riscontrando guardando il mio post originale. Ho modificato un po '.
Seong Lee,

Vedi la mia risposta aggiornata.
allcaps

Risposte:


108

Hai ragione. : before e: after lo pseudo contenuto non è concepito per funzionare su contenuti imge inputelementi sostituiti . L'aggiunta di un elemento a capo e la dichiarazione di una famiglia di caratteri è una delle possibilità, così come l'utilizzo di un'immagine di sfondo. O forse un testo segnaposto html5 soddisfa le tue esigenze:

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

I browser che non supportano l'attributo segnaposto lo ignoreranno semplicemente.

AGGIORNARE

La prima contenuto selettore seleziona l'ingresso: input[type="text"]:before. È necessario selezionare l'involucro: .wrapper:before. Vedi http://jsfiddle.net/allcaps/gA4rx/ . Ho anche aggiunto il suggerimento segnaposto in cui il wrapper è ridondante.

.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>

Ricaderci

Font Awesome utilizza l'Area di utilizzo privato Unicode (PUA) per memorizzare le icone. Altri caratteri non sono presenti e tornano ai valori predefiniti del browser. Dovrebbe essere lo stesso di qualsiasi altro input. Se si definisce un carattere sugli elementi di input, fornire lo stesso carattere del fallback per le situazioni in cui si utilizza un'icona. Come questo:

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

4
L'uso del metodo segnaposto funziona. Il problema è che il normale testo (senza icona) non corrisponde alla faccia del carattere del resto della pagina e viene visualizzato come serif predefinito del browser. Un modo per aggirare questo?
Harry

6
Font Awesome utilizza l'Area di utilizzo privato Unicode (PUA) per memorizzare le icone. Altri caratteri non sono presenti e tornano ai valori predefiniti del browser. Dovrebbe essere lo stesso di qualsiasi altro input. Se si definisce un tipo di carattere su elementi di input da qualche parte, quindi fornire lo stesso tipo di carattere, come ripiego per le situazioni in cui noi usiamo un'icona: input { font-family: 'FontAwesome' YourFont; }. questo aiuta? Puoi sempre fare una nuova domanda.
allcaps

1
@allcaps la raccomandazione di utilizzare una famiglia di caratteri di fallback per i segnaposto WONDERS !! Non pensavo di cambiare il carattere attraverso un fallback. Puoi aggiornare la tua risposta per includere un carattere di fallback per i futuri utenti? Grazie!
ProfileTwist

1
dove posso trovare un elenco di codici. intendo fa-user a & # 61447;
Elyor,

1
@Elyor: non è necessario utilizzare l'entità html. Se il tuo progetto è UTF-8, puoi semplicemente copiare e incollare il glifo impressionante Font. Probabilmente apparirà come un blocco nel tuo editor di codice, ma va bene. Puoi anche usare uno dei molti convertitori online da unicode a html.
allcaps

123

Produzione:

inserisci qui la descrizione dell'immagine

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>

(O)

Produzione:

inserisci qui la descrizione dell'immagine

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
È stato un consiglio eccellente sull'uso di font-awesome con una casella di testo.
Sunil,

È possibile rendere selezionabile quell'icona?
FrenkyB,

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

2
L'impostazione z-index: 1farà in modo che l'input sottostante attiri lo stato attivo quando fai clic sull'icona, qualcosa che potresti desiderare ad esempio quando aggiungi un datepicker.
romaricdrigon,

Funziona bene per me ma non ho usato position: relative(i margini negativi non ne hanno bisogno) né z-index(non appena l'elemento viene visualizzato dopo l'input)
Pierre de LESPINAY

24

Potresti usare un wrapper. All'interno del wrapper, aggiungi il fantastico elemento font i e l' inputelemento.

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

quindi imposta la posizione del wrapper su relative:

.wrapper { position: relative; }

e quindi imposta la iposizione dell'elemento su assoluta, e imposta la posizione corretta per essa:

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

(È un trucco, lo so, ma fa il lavoro.)


2
Perché abbiamo bisogno di un .wrapper lì?
Ashfaque Rifaye,

A quanto ho capito, gli elementi assoluti sono posizionati rispetto al più vicino antenato "posizionato". Posizione: relativa significa che il wrapper è 'posizionato' (potrebbe anche essere stato assoluto, fisso o appiccicoso). Se non lo fai, l'icona sarà posizionata in modo assoluto rispetto ad altri elementi più in alto nel dom (o se non vengono trovati elementi posizionati, relativamente al viewport).
Jaqen H'ghar,

20

Questa risposta funzionerà per te se hai bisogno che siano soddisfatte le seguenti condizioni (nessuna delle risposte attuali ha soddisfatto queste condizioni):

  1. L'icona è dentro della casella di testo
  2. L'icona non dovrebbe scomparire quando il testo viene inserito nell'input e il testo inserito va a destra dell'icona
  3. Fare clic sull'icona dovrebbe mettere a fuoco l'input sottostante

Credo che 3 sia il numero minimo di elementi HTML per soddisfare queste condizioni:

.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
La migliore risposta per avere l'icona all'interno del campo di input, dove l'icona rimane visibile mentre l'utente digita.
Obiettivo

in alto: calc (50% - 0,5 em) presume che l'etichetta abbia un'altezza di
1em

1
@drichar - Ho appena provato, funziona ancora con qualsiasi altezza dell'etichetta. Fintanto che non allineate verticalmente il testo dell'etichetta all'interno dell'etichetta (che non è l'impostazione predefinita) Poiché per impostazione predefinita si allinea alla parte superiore, un'etichetta più alta funzionerà comunque correttamente. Ho anche testato con diverse dimensioni dei caratteri sull'etichetta e sull'input. Sembra funzionare in tutti gli scenari.
Skeets

@ SkeetsO'Reilly mi correggo. Sto confondendo em e rem. 0,5em è la metà di qualunque sia la dimensione del carattere. Ottima soluzione, lo sto usando in un progetto (solo usando SVG personalizzato, non FA, che non ha dimensioni del carattere, che ha portato al mio problema di posizionamento e commento disinformato)
drichar

14

Non c'è bisogno di programmare molto ... basta seguire i seguenti passi:

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

puoi trovare i link per Unicode ( fontawesome ) qui ...

FontAwesome Unicode per icone


Cosa succede se sto già utilizzando un'altra famiglia di caratteri per segnaposto? quindi non funzionerà. Esiste un modo per fare in modo che il testo "Cerca" in "& # xf002 Cerca" utilizzi il carattere personalizzato e unicode utilizzi ancora il carattere 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>


Salve, allega una piccola spiegazione per la tua soluzione.
Aditya Thakur

1
Questa risposta funzionerà per te se hai bisogno delle seguenti condizioni (nessuna delle risposte attuali ha soddisfatto queste condizioni): L'icona è all'interno della casella di testo L'icona non dovrebbe scomparire quando il testo viene inserito nell'input e il testo inserito va a il diritto dell'icona Cliccando sull'icona dovrebbe mettere a fuoco l'input sottostante Credo che 3 sia il numero minimo di elementi HTML per soddisfare le condizioni
Ola Olushesi

5

Dopo aver letto varie versioni di questa domanda e aver cercato in giro, ho trovato una soluzione abbastanza pulita e priva di js. È simile alla soluzione @allcaps ma evita che il problema del carattere di input venga modificato a partire dal carattere del documento principale.

Usa l' ::input-placeholderattributo per in modo specifico il testo segnaposto. Ciò consente di utilizzare il carattere icona come carattere segnaposto e il corpo (o altro carattere) come testo di input effettivo. Attualmente è necessario specificare selettori specifici del fornitore.

Funziona bene finché non hai bisogno di una combinazione di icona e testo nell'elemento di input. In tal caso, dovrai inserire il testo segnaposto come font predefinito del browser (serif sul mio) per le parole.

Ad esempio
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';
}

Violino con selettori con prefisso browser: http://jsfiddle.net/gA4rx/78/

Si noti che è necessario definire ciascun selettore specifico del browser come regola separata. Se li combini, il browser lo ignorerà.


Sebbene sia una soluzione elegante, non raggiunge il comportamento previsto.
Olivier Refalo,

In effetti, sembra che i browser Webkit siano gli unici ad accettare font-familyquesto selettore in questo momento. Possiamo solo sperare in un'accettazione più diffusa in futuro.
harryg

5

Ho trovato il modo più semplice usando 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

L'ho fatto così

  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>

Il risultato è simile al seguente:

risultato

Nota a margine

Si prega di notare che sto usando Ruby on Rails, quindi il mio codice risultante sembra un po 'gonfiato. Il codice di visualizzazione in slim è in realtà molto conciso:

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

Per me, un modo semplice per avere un'icona "all'interno" di un input di testo senza dover provare a usare pseudo-elementi con unicode impressionante di font ecc., È avere l'input di testo e l'icona all'interno di un elemento wrapper che posizioneremo relativo, e quindi posizionare sia l'immissione della ricerca sia l'icona del carattere eccezionale in assoluto.

Come facciamo con le immagini di sfondo e il testo, faremmo qui. Penso che questo sia utile anche per i principianti, poiché il posizionamento CSS è qualcosa che un principiante dovrebbe imparare all'inizio del loro viaggio di programmazione, quindi il codice è facile da capire e riutilizzare.

    <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

Basandosi sul suggerimento di allcaps. Ecco il metodo di sfondo fantastico per i font con la minima quantità di 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

Rendi l'icona selezionabile per mettere a fuoco all'interno dell'elemento di input di testo.

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>

Aggiungi qualsiasi icona che ti piace all'interno del <i>tag, dalla libreria Font Awesome e goditi i risultati.


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
Sarà più utile all'OP se pubblichi anche qualche spiegazione su cosa sta facendo questo blocco di codice!
Kim

0

puramente 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
Puoi spiegare la tua risposta, per favore?
E. Zeytinci,

0

La mia soluzione era quella di avere un relativo contenitore attorno al inputper contenere l'icona. Quel contenitore esterno ha una ::aftercon l'icona desiderata, posizionata absoluteall'interno del contenitore.

HTML:

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

Codice 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

La mia soluzione per aggiungere un'icona di carattere fantastico all'interno dell'elemento di input. Ecco un semplice codice per aggiungere l'icona all'interno dell'elemento di input. Copia il codice qui sotto e inserisci dove vuoi aggiungere. o se vuoi cambiare l'icona, inserisci semplicemente il tuo codice icona nel <i> tag.

<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 risposta è utile, ma la frase che è spam non è consentita. Se vuoi avere qualcosa del genere, puoi inserire un link nel tuo profilo.
Makyen

Mentre questo frammento di codice può risolvere la domanda, inclusa una spiegazione aiuta davvero a migliorare la qualità del tuo post. Ricorda che stai rispondendo alla domanda per i lettori in futuro e quelle persone potrebbero non conoscere i motivi del tuo suggerimento sul codice.
Clijsters

0

A volte l'icona non verrà visualizzata a causa della versione Font Awesome. Per la versione 5, il CSS dovrebbe essere

.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

Modo semplice, ma è necessario il 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 -->

inserisci qui la descrizione dell'immagine


-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

Ho provato le cose di seguito e funziona davvero bene 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 domanda è sull'uso delle fantastiche icone dei caratteri
gaitat,

-5

Per funzionare con unicode o fontawesome, dovresti aggiungere un spancon classcome di seguito:

In HTML:

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

Nel 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
questo non inserirà l'icona nell'inserimento del testo
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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.