Bunun yerine başka bir etiket kullanabilir input
ve FontAwesome'yı normal şekilde uygulayabilirsiniz.
senin input
with type yerine şunu image
kullanabilirsin:
<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 i
veya 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 :before
simgeleri 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="" />
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 \f002
için 
ve çalışması gerekir.
FontAwesome ascii koduna bağlantı ( hile sayfası ): fortawesome.github.io/Font-Awesome/cheatsheet
Simgelerin boyutu ile kolayca ayarlanabilir font-size
.
input
Bir jsfidde içinde bir eleman kullanan yukarıdaki örneğe bakın :
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";
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!
:before
ve bu nedenleinput
veyaimg
etiketleriyle ç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 ;-)