Wie füge ich dem Eingabefeld ein Font Awesome-Symbol hinzu?

Wie verwende ich das in Font Awesome enthaltene Suchsymbol für die Eingabe? Ich habe eine Suchfunktion auf meiner Website (basierend auf PHPmotion), die ich für die Suche verwenden möchte.

Hier ist der Code:

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

Sie können stattdessen ein anderes Tag verwenden inputund FontAwesome auf normale Weise anwenden.

Anstelle Ihres inputwith-Typs können imageSie Folgendes verwenden:

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

schnelles CSS :

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

Hier ist eine kurze Geige: DEMO

Sie können es etwas besser gestalten und dem i-Objekt Ereignisfunktionalität hinzufügen, indem Sie ein <button type="submit">Objekt anstelle von ioder mit Javascript verwenden.

Der Button sollution wäre ungefähr so:

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

Und das CSS :

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

Hier ist meine Geige mit dem Button anstelle von i: DEMO aktualisiert

Update: Verwenden von FontAwesome für ein beliebiges Tag

Das Problem mit FontAwsome ist, dass das Stylesheet Pseudoelemente verwendet :before, um die Symbole zu einem Element hinzuzufügen - und Pseudoelemente funktionieren nicht / sind für inputElemente nicht zulässig . Aus diesem Grund funktioniert die normale Verwendung von FontAwesome nicht input.

Es gibt jedoch eine Lösung : Sie können FontAwesome wie folgt als normale Schriftart verwenden:

CSS:

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

HTML:

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

Die Glyphen können als Werte des valueAttributs übergeben werden. Der ASCII - Codes für die einzelnen Buchstaben / Symbole können in der FontAwesome CSS - Datei gefunden werden, müssen Sie sie nur in eine HTML - ascii - Nummer ändern , wie \f002zu und es sollte funktionieren.

Link zum FontAwesome ASCII- Code ( Cheatsheet ): fortawesome.github.io/Font-Awesome/cheatsheet

Die Größe der Symbole kann einfach über angepasst werden font-size.

Siehe das obige Beispiel mit einem inputElement in einer jsfidde:

DEMO

Update: FontAwesome 5

Mit FontAwesome Version 5 hat sich das für diese Lösung erforderliche CSS geändert - der Name der Schriftfamilie wurde geändert und die Schriftstärke muss angegeben werden:

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

Siehe @ WillFasties Kommentar mit Link zum aktualisierten Geigenbalg. Vielen Dank!

Hier ist eine Lösung, die mit einfachem CSS und einer großartigen Syntax für Standardschriften funktioniert, ohne dass Unicode-Werte usw. erforderlich sind.

1. Erstellen Sie ein <input>Tag, gefolgt von einem Standard- <i>Tag mit dem gewünschten Symbol.

2. Verwenden Sie die relative Positionierung zusammen mit einer höheren Ebenenreihenfolge (Z-Index) und verschieben Sie das Symbol über und über das Eingabefeld.

3. (Optional) Sie können das Symbol aktivieren, um die Daten möglicherweise über Standard-JS zu senden.

In den drei folgenden Codefragmenten finden Sie Informationen zu HTML / CSS / JS.

Oder dasselbe in JSFiddle hier: Beispiel: 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>

Für diejenigen, die sich fragen, wie FontAwesome-Symbole für Drupal-Eingaben verwendet werden können, müssen Sie zuerst die folgenden Entschlüsselungen vornehmen:

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

Ändern Sie Ihre Eingabe in ein Schaltflächenelement, und Sie können die Font Awesome-Klassen darauf verwenden. Die Ausrichtung des Glyphen ist in der Demo nicht besonders gut, aber Sie haben die Idee:

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

Der Vorteil hierbei ist, dass das Formular weiterhin voll funktionsfähig ist, ohne dass Ereignishandler für Elemente hinzugefügt werden müssen, die keine Schaltflächen sind, aber wie eine aussehen.

Ähnlich wie bei der oberen Antwort habe ich das Unicode-Zeichen im Abschnitt value = des HTML-Codes verwendet und FontAwesome als Schriftfamilie für dieses Eingabeelement aufgerufen. Das einzige, was ich hinzufügen möchte, dass die oberste Antwort nicht abdeckt, ist, dass mein Wertelement auch Text nach dem Symbol enthält. Wenn Sie die Schriftfamilie in FontAwesome ändern, sieht der normale Text schlecht aus. Die Lösung bestand einfach darin, das CSS so zu ändern, dass es Fallback-Schriftarten enthält:

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

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

Auf diese Weise greift FontAwesome auf das Symbol zu, aber auf alle Nicht-Symboltexte wird die gewünschte Schriftart angewendet.

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

einfache Möglichkeit für neue Schrift fantastisch

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

Um dies mit Unicode oder Fontawesome zu tun, sollten Sie einen Bereich mit der folgenden Klasse hinzufügen, da das Eingabe-Tag keine Pseudoklassen wie: after unterstützt. Dies ist keine direkte Lösung

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;   

}