Jak dodać ikonę Font Awesome do pola wprowadzania?

Jak używać ikony wyszukiwania zawartej w Font Awesome do wprowadzania danych? Mam w swojej witrynie funkcję wyszukiwania (opartą na PHPmotion), której chcę użyć do wyszukiwania.

Oto kod:

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

Możesz użyć innego tagu zamiast inputi zastosować FontAwesome w normalny sposób.

zamiast twojego inputz typem imagemożesz użyć tego:

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

szybki CSS :

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

Oto krótkie skrzypce: DEMO

Możesz nieco poprawić styl i dodać funkcjonalność zdarzeń do obiektu i, co możesz zrobić, używając <button type="submit">obiektu zamiast ilub za pomocą javascript.

Rozwiązanie przycisku wyglądałoby mniej więcej tak:

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

Oraz CSS :

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

oto moje skrzypce zaktualizowane przyciskiem zamiast i: DEMO

Aktualizacja: używanie FontAwesome na dowolnym tagu

Problem z FontAwsome polega na tym, że jego arkusz stylów używa :beforepseudoelementów do dodawania ikon do elementu - a pseudoelementy nie działają / nie są dozwolone na inputelementach. Dlatego używanie FontAwesome w normalny sposób nie zadziała input.

Ale jest rozwiązanie - możesz użyć FontAwesome jako zwykłej czcionki, na przykład:

CSS:

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

HTML:

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

Glify mogą być przekazywane jako wartości valueatrybutu. Kody ascii dla poszczególnych liter / ikon można znaleźć w pliku css FontAwesome, wystarczy je zmienić na numer ascii HTML, taki jak \f002to i powinno działać.

Link do kodu ascii FontAwesome ( ściągawka ): fortawesome.github.io/Font-Awesome/cheatsheet

Rozmiar ikon można łatwo dostosować za pomocą font-size.

Zobacz powyższy przykład z użyciem inputelementu w jsfidde:

PRÓBNY

Aktualizacja: FontAwesome 5

Wraz z FontAwesome w wersji 5 zmienił się CSS wymagany dla tego rozwiązania - zmieniła się nazwa rodziny czcionek i należy określić grubość czcionki:

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

Zobacz komentarz @WillFastie z linkiem do zaktualizowanych skrzypiec poniżej. Dzięki!

Oto rozwiązanie, które działa z prostym CSS i standardową, niesamowitą składnią czcionek, bez potrzeby używania wartości Unicode itp.

1. Utwórz <input>tag, a po nim standardowy <i>tag z potrzebną ikoną.

2. Użyj pozycjonowania względnego wraz z wyższą kolejnością warstw (indeks z) i przesuń ikonę nad pole wejściowe i nad nim.

3. (Opcjonalnie) Możesz aktywować ikonę, aby być może przesłać dane, za pomocą standardowego JS.

Zobacz trzy fragmenty kodu poniżej dla HTML / CSS / JS.

Lub to samo w JSFiddle tutaj: Przykład: 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>

Dla tych, którzy zastanawiają się, jak uzyskać ikony FontAwesome na wejściu drupal, najpierw musisz dekodować_entities w następujący sposób:

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

Zmień dane wejściowe na element przycisku i możesz użyć na nim klas Font Awesome. Wyrównanie glifu nie jest świetne w wersji demonstracyjnej, ale masz pomysł:

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

Zaletą jest to, że formularz jest nadal w pełni funkcjonalny bez konieczności dodawania programów obsługi zdarzeń dla elementów, które nie są przyciskami, ale wyglądają jak jeden.

Podobnie jak w przypadku pierwszej odpowiedzi, użyłem znaku Unicode w sekcji value = kodu HTML i nazwałem FontAwesome jako rodzinę czcionek w tym elemencie wejściowym. Jedyną rzeczą, którą dodam, że górna odpowiedź nie obejmuje, jest to, że ponieważ mój element wartości również zawierał tekst po ikonie, zmiana rodziny czcionek na FontAwesome sprawiła, że ​​zwykły tekst wyglądał źle. Rozwiązaniem była po prostu zmiana CSS, tak aby zawierał czcionki zastępcze:

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

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

W ten sposób FontAwesome przejmie ikonę, ale wszystkie teksty niebędące ikonami będą miały zastosowaną żądaną czcionkę.

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

prosty sposób na nową niesamowitą czcionkę

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

aby pracować z Unicode lub Fontawesome, powinieneś dodać span z klasą jak poniżej, ponieważ znacznik input nie obsługuje pseudoklas, takich jak: after. nie jest to bezpośrednie rozwiązanie

w html:

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

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

}