Giriş alanına nasıl Font Awesome simgesi eklerim?


89

Font Awesome'de bulunan arama simgesini girdi için nasıl kullanabilirim? Sitemde arama için kullanmak istediğim (PHPmotion'a dayalı) bir arama özelliği var.

İşte 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>

Yanıtlar:


114

Bunun yerine başka bir etiket kullanabilir inputve FontAwesome'yı normal şekilde uygulayabilirsiniz.

senin inputwith type yerine şunu imagekullanabilirsin:

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

hızlı CSS :

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

İşte hızlı bir keman: DEMO

Onu biraz daha iyi biçimlendirebilir ve i nesnesine olay işlevselliği ekleyebilirsiniz, bunu javascript <button type="submit">yerine bir nesne kullanarak iveya kullanarak yapabilirsiniz .

Düğme çözümü şunun gibi bir şey olacaktır:

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

Ve CSS :

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

işte benim kemanım i: DEMO yerine düğmeyle güncellendi


Güncelleme: FontAwesome'yı herhangi bir etikette kullanma

FontAwsome ile ilgili sorun, stil sayfasının :beforesimgeleri bir öğeye eklemek için sözde öğeler kullanması ve sözde öğelerin öğelerde çalışmaması / bunlara izin verilmemesidir input. Bu nedenle FontAwesome'yı normal şekilde kullanmak işe yaramayacaktır input.

Ancak bir çözüm var - FontAwesome'ı şu şekilde normal bir yazı tipi olarak kullanabilirsiniz:

CSS:

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

HTML:

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

Glifler, valueözniteliğin değerleri olarak aktarılabilir . Bireysel harfler ASCII kodları / simgeler FontAwesome css dosyasında bulunabilir, sadece böyle bir HTML ASCII sayıya değiştirmeniz gerekir \f002için &#xf002;ve çalışması gerekir.

FontAwesome ascii koduna bağlantı ( hile sayfası ): fortawesome.github.io/Font-Awesome/cheatsheet

Simgelerin boyutu ile kolayca ayarlanabilir font-size.

inputBir jsfidde içinde bir eleman kullanan yukarıdaki örneğe bakın :

DEMO


Güncelleme: FontAwesome 5

FontAwesome sürüm 5 ile, bu çözüm için gerekli CSS değişmiştir - yazı tipi ailesi adı değişmiştir ve yazı tipi ağırlığı belirtilmelidir:

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

Aşağıdaki güncellenmiş keman bağlantısıyla birlikte @WillFastie'nin yorumuna bakın. Teşekkürler!


2
@HTMLDeveloper sorun, FontAwesome'ın normalde uygulandığı şekildedir ... kullandığı :beforeve bu nedenle inputveya imgetiketleriyle çalışmayacağı için ... ancak basit bir çözüm var - yani, normal yazı tipi olarak FontAwesome'ı kullanmak ... güncellenmiş çözümüme bakın yukarıda. Umarım oyu geri kazanırım ;-)
Martin Turjak

11
Boo you @HTMLDeveloper ... Cevabında açıkça belirtti (tüm düzenlemelerde kontrol ettim) bir giriş etiketine bir Font Awesome stili uygulayamayacağınızı. Daha sonra birkaç farklı çözüm sunmaya devam etti ve bunlardan yalnızca biri bir düğme kullanmayı içeriyordu. Daha sonra onun kesin cevabını kendi başınıza kullanmaya başladınız. Kötü form.
o_O

1
Bağlantı ASCII kodu ( Pardus :) fortawesome.github.io/Font-Awesome/cheatsheet
Vadorequest

1
@Vadorequest teşekkürler! iyi fikir ... ^ _ ^ yanıtına bağlantıyı ekledim
Martin Turjak

2
+1 fkn büyük numara !! teşekkürler neden olduğunu merak ediyordum & # xf002; girişte gösterilmiyordu, font ailesini eklemek olduğunu fark etti: FontAwesome; beni kurtardın: D
itsme

46

İşte basit CSS ve standart yazı tipi harika sözdizimi ile çalışan, unicode değerlerine ihtiyaç duymayan vb. Bir çözüm.

  1. İhtiyacınız olan simgeyi içeren <input>standart bir etiketin ardından bir etiket oluşturun <i>.

  2. Göreceli konumlandırmayı daha yüksek bir katman sırası (z-endeksi) ile birlikte kullanın ve simgeyi giriş alanının üstüne ve üstüne taşıyın.

  3. (İsteğe bağlı) Veriyi standart JS aracılığıyla göndermek için simgeyi etkinleştirebilirsiniz.

HTML / CSS / JS için aşağıdaki üç kod parçacığına bakın.

Veya JSFiddle'da da aynısı: Örnek: 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>


10

FontAwesome simgelerini drupal girdiye nasıl getireceklerini merak edenler için, ilk önce şu şekilde_entities kodunu çözmelisiniz:

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

4

Girişinizi bir düğme öğesine değiştirin ve üzerinde Font Awesome sınıflarını kullanabilirsiniz. Demoda glifin hizalanması pek iyi değil, ancak şu fikri anlıyorsunuz:

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

Buradaki avantaj, düğme olmayan ancak tek gibi görünen öğeler için olay işleyicileri eklemek zorunda kalmadan formun hala tam olarak işlevsel olmasıdır.


1

En üstteki yanıta benzer şekilde, HTML'nin value = bölümünde unicode karakterini kullandım ve bu girdi öğesinde font ailesi olarak FontAwesome adını verdim. En üstteki cevabın kapsamadığını ekleyeceğim tek şey, değer öğemde simgeden sonra metin bulunduğundan, font ailesini FontAwesome olarak değiştirmenin normal metni kötü göstermesidir. Çözüm basitçe CSS'yi yedek yazı tiplerini içerecek şekilde değiştirmekti:

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

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

Bu şekilde FontAwesome simgeyi yakalayacak, ancak simge olmayan tüm metinlerde istenen yazı tipi uygulanacaktır.


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

harika yeni yazı tipi için basit bir yol

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

-4

bunu unicode veya fontawesome ile çalışmak için, aşağıdaki gibi sınıflı bir span eklemelisiniz, çünkü input etiketi: after gibi sözde sınıfları desteklemez. bu doğrudan bir çözüm değil

html'de:

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

css'de:

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

}

7
soru, span etiketi için yanıtladığınız giriş etiketi için soruldu
o_O

Aslında, düğmeler yerine metin girişlerine uygulama ile ilgili tek cevap, yani +1.
BorisOkunskiy

1
oysa @incarnate aslında bu cevap, bir giriş alanına ancak bir yayılma stili geçerli değildir MartinTurjak onun tam bir çözüm (ve ek alternatifler) sunmaktadır yukarıdaki cevabı .
BobbyZ

Gerçekten demek metin konusu devletler beri burada girişler «Ben girişi alanına bir Yazı Araçları simgesine nasıl eklerim?» - ve düğmeler hakkında hiçbir şeyden bahsetmez. MartinTurjak, metin alanlarını değil, düğmeleri biçimlendirmenin iyi yollarını açıklar.
BorisOkunskiy
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.