Come aggiungo un'icona di Font Awesome al campo di immissione?

Question 1

Come si utilizza l'icona di ricerca inclusa in Font Awesome per l'input? Ho una funzione di ricerca sul mio sito (basata su PHPmotion), che desidero utilizzare per la ricerca.

Ecco il codice:

<div id="search-bar">

      <form method="get" action="search.php" autocomplete="off" name="form_search">
        <input type="hidden" name="type" value="videos" />
            <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
            'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
            font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
            #ffffff" />
            <input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
        <div id="searchBoxSuggestions"></div>
        </form>
        </div>

Question 2

Puoi usare un altro tag invece di inpute applicare FontAwesome nel modo normale.

invece del tuo inputcon il tipo imagepuoi usare questo:

<i class="icon-search icon-2x"></i>

CSS veloce :

.icon-search {
    color:white;
    background-color:black;
}

Ecco un violino veloce: DEMO

Puoi modellarlo un po 'meglio e aggiungere funzionalità di eventi, all'oggetto i, cosa che puoi fare usando un <button type="submit">oggetto invece di i, o con javascript.

La soluzione del pulsante sarebbe qualcosa del genere:

<button type="submit" class="icon-search icon-large"></button>

E il CSS :

.icon-search {
    height:32px;
    width:32px;
    border: none;
    cursor: pointer;
    color:white;
    background-color:black;
    position:relative;
}

ecco il mio violino aggiornato con il pulsante invece di i: DEMO

Aggiornamento: utilizzo di FontAwesome su qualsiasi tag

Il problema con FontAwsome è che il suo foglio di stile utilizza :beforepseudo-elementi per aggiungere le icone a un elemento e gli pseudo-elementi non funzionano / non sono consentiti sugli inputelementi. Questo è il motivo per cui usare FontAwesome nel modo normale non funzionerà con input.

Ma c'è una soluzione : puoi usare FontAwesome come un carattere normale in questo modo:

CSS:

input[type="submit"] {
    font-family: FontAwesome;
}

HTML:

<input type="submit" class="search" value="&#xf002;" />

I glifi possono essere passati come valori valuedell'attributo. I codici ascii per le singole lettere / icone possono essere trovati nel file css FontAwesome, devi solo cambiarli in un numero ascii HTML simile \f002a e dovrebbe funzionare.

Link alla FontAwesome codice ASCII ( bigino ): fortawesome.github.io/Font-Awesome/cheatsheet

La dimensione delle icone può essere facilmente regolata tramite font-size.

Vedi l'esempio sopra usando un inputelemento in un jsfidde:

DEMO

Aggiornamento: FontAwesome 5

Con FontAwesome versione 5 il CSS richiesto per questa soluzione è cambiato: il nome della famiglia di caratteri è cambiato e il peso del carattere deve essere specificato:

input[type="submit"] {
    font-family: "Font Awesome 5 Free"; // for the open access version
    font-size: 1.3333333333333333em;
    font-weight: 900;
}

Vedere il commento di @WillFastie con il collegamento al violino aggiornato qui sotto. Grazie!

Question 3

Ecco una soluzione che funziona con un semplice CSS e una fantastica sintassi dei caratteri standard, senza bisogno di valori Unicode, ecc.

Crea un <input>tag seguito da un <i>tag standard con l'icona che ti serve.
Usa il posizionamento relativo insieme a un ordine dei livelli più alto (z-index) e sposta l'icona sopra e sopra il campo di input.
(Opzionale) È possibile rendere attiva l'icona, magari per inviare i dati, tramite JS standard.

Vedi i tre frammenti di codice di seguito per HTML / CSS / JS.

O lo stesso in JSFiddle qui: Esempio: http://jsfiddle.net/ethanpil/ws1g27y3/

$('#filtersubmit').click(function() {
  alert('Searching for ' + $('#filter').val());
});

#filtersubmit {
  position: relative;
  z-index: 1;
  left: -25px;
  top: 1px;
  color: #7B7B7B;
  cursor: pointer;
  width: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>

Espandi lo snippet

Question 4

Per coloro che si stanno chiedendo come ottenere icone FontAwesome in input drupal, devi prima decode_entities in questo modo:

$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities('&#xf014;'), // code for FontAwesome trash icon
// etc.
);

Question 5

Cambia il tuo input in un elemento pulsante e puoi usare le classi Font Awesome su di esso. L'allineamento del glifo non è eccezionale nella demo, ma hai l'idea:

http://tinker.io/802b6/1

<div id="search-bar">
  <form method="get" action="search.php" autocomplete="off" name="form_search">
    <input type="hidden" name="type" value="videos" />
        <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
        'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
        font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
        #ffffff" /><!--
        --><button class="icon-search">Search</button>
    <div id="searchBoxSuggestions"></div>
    </form>
</div>

#search-bar .icon-search {
    width: 30px;
    height: 30px;
    background: black;
    color: white;
    border: none;
    overflow: hidden;
    vertical-align: middle;
    padding: 0;
}

#search-bar .icon-search:before {
    display: inline-block;
    width: 30px;
    height: 30px;
}

Il vantaggio qui è che il modulo è ancora completamente funzionante senza dover aggiungere gestori di eventi per elementi che non sono pulsanti ma che ne hanno l'aspetto.

Question 6

Simile alla risposta in alto, ho usato il carattere unicode nella sezione value = dell'HTML e ho chiamato FontAwesome come famiglia di caratteri su quell'elemento di input. L'unica cosa che aggiungerò che la risposta in alto non copre è che, poiché il mio elemento valore aveva anche del testo al suo interno dopo l'icona, la modifica della famiglia di caratteri in FontAwesome ha reso il testo normale un aspetto brutto. La soluzione era semplicemente cambiare il CSS per includere i caratteri di fallback:

<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">

font-family: FontAwesome, Roboto, sans-serif;

In questo modo, FontAwesome catturerà l'icona, ma a tutto il testo non icona verrà applicato il carattere desiderato.

Question 7

.fa-file-o {
    position: absolute;
    left: 50px;
    top: 15px;
    color: #ffffff
}

<div>
 <span class="fa fa-file-o"></span>
 <input type="button" name="" value="IMPORT FILE"/>
</div>

Question 8

modo semplice per nuovi caratteri fantastici

  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="txtSearch"  >
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
                    </div>
                </div>

Question 9

per lavorare con unicode o fontawesome, dovresti aggiungere uno span con la classe come sotto, perché il tag di input non supporta classi pseudo come: after. questa non è una soluzione diretta

in html:

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

in 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;   

}