it-swarm.com.de

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 auf meiner Site eine Suchfunktion (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>
78
user2275855

Sie können anstelle von input ein anderes Tag verwenden und FontAwesome wie gewohnt anwenden.

anstelle Ihrer input mit dem Typ image können Sie Folgendes verwenden:

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

schnell CSS:

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

Hier ist eine schnelle Geige: DEMO

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

Der Button sollution wäre etwa 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 aktualisiert: DEMO


Update: Verwenden von FontAwesome für beliebige Tags

Das Problem bei FontAwsome ist, dass sein Stylesheet :before-Pseudo-Elemente verwendet, um die Symbole zu einem Element hinzuzufügen - und Pseudo-Elemente funktionieren nicht für input-Elemente. Daher funktioniert die normale Verwendung von FontAwesome nicht mit input.

Aber es gibt eine Lösung - Sie können FontAwesome als reguläre Schrift verwenden, z.

CSS:

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

HTML:

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

Die Glyphen können als Werte des value-Attributs übergeben werden. Die ASCII-Codes für die einzelnen Buchstaben/Symbole befinden sich in der FontAwesome-CSS-Datei. Sie müssen sie lediglich in eine HTML-ASCII-Nummer wie \f002 in &#xf002; umwandeln, und es sollte funktionieren.

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

Die Größe der Icons kann einfach über font-size eingestellt werden.

Siehe das obige Beispiel mit einem input-Element in einer jsfidde:

DEMO


Update: FontAwesome 5

Mit FontAwesome Version 5 wurde 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 den Kommentar von @WillFastie mit einem Link zur aktualisierten Geige unten. Vielen Dank!

101
Martin Turjak

Hier ist eine Lösung, die mit einfacher CSS- und Standardschriftart-Syntax arbeitet, keine Notwendigkeit für Unicode-Werte usw.

  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 bewegen Sie das Symbol über und über dem Eingabefeld.

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

In den drei folgenden Codeausschnitten finden Sie das 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>

40
ethanpil

Für diejenigen, die sich fragen, wie man FontAwesome-Symbole für die Drupal-Eingabe erhält, müssen Sie zuerst decode_entities wie folgt dekodieren:

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

Ändern Sie Ihre Eingabe in ein Schaltflächenelement, und Sie können die Font Awesome-Klassen verwenden. Die Ausrichtung der Glyphe 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 immer noch voll funktionsfähig ist, ohne dass Event-Handler für Elemente hinzugefügt werden müssen, die keine Schaltflächen sind, sondern wie einer aussehen.

4
cimmanon
.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>
0
dxpkumar