Harika yazı tipinde "gönder" girdi türü için bir sınıf yok gibi görünüyor. Düğme girişi için font-awesome öğesinden bir sınıf kullanmak mümkün mü? Uygulamalarımdaki tüm düğmelere simgeler ekledim (bu aslında twitter-bootstrap sınıfından 'btn' ile bağlantılıdır), ancak 'girdi türü gönderme' üzerine simgeler ekleyemiyorum.

Veya bu kod nasıl kullanılır:

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

html:

<input type="submit" id="image-button">Text</input>

( HTML'den aldığım : İçinde metin + resim bulunan bir gönderme düğmesi nasıl yapılır? ) font-awesome ile?

girdi yerine düğme tipi = "gönder" kullanın

<button type="submit" class="btn btn-success">
    <i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>

Font Awesome 3.2.0 kullanımı için

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>

HTML

Yana <input>değer özelliğinin eleman görüntüler sadece değeri, sadece onu manipüle etmeye vardır:

<input type="submit" class="btn fa-input" value="&#xf043; Input">

Ben burada U + F043, Font Awesome 'renk tonu' sembolü karşılık gelen varlık kullanıyorum .

CSS

Sonra yazı tipini kullanmak için stil vermeliyiz:

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Bu bize Font Awesome'deki renk tonu sembolünü ve uygun fonttaki diğer metni verecektir.

Bununla birlikte, bu kontrol piksel mükemmel olmayacaktır, bu yüzden kendiniz ayarlamanız gerekebilir.

Yazı tipi müthiş utf cheatsheet kullanabilirsiniz

<input type="submit" class="btn btn-success" value="&#xf011; Login"/>

İşte hile sayfası için bağlantı http://fortawesome.github.io/Font-Awesome/cheatsheet/

Peki, teknik almak mümkün değildir :beforeve :aftersözde elemanları üzerinde çalışmak inputelemanları

Gönderen W3C :

12.1: before ve: after sözde elemanlar

Yazarlar oluşturulan içeriğin stilini ve konumunu: before ve: after sözde elemanlarıyla belirtirler. Adlarının da belirttiği gibi,: before ve: after sözde öğeleri, bir öğenin belge ağacı içeriğinden önce ve sonra içeriğin konumunu belirtir. 'Pseudo-elements ile birlikte' content 'özelliği, eklenenleri belirtir.

Bu yüzden inputetiket şeklinde düğmeler gönderdiğim bir projem vardı ve bir nedenden ötürü diğer geliştiriciler <button>normal giriş gönderme düğmeleri yerine etiketleri kullanmamı kısıtladılar , bu yüzden bir başka çözüm buldum.span kümenin için position: relative;ve o zaman kesinlikle kullanılarak simge konumlandırılması :aftersözde.

Not: Demo kemanı FontAwesome 3.2.1 için içerik kodunu kullanır, bu nedenle content özellik buna göre .

HTML

<span><input type="submit" value="Send" class="btn btn-default" /></span>

CSS

input[type="submit"] {
    margin: 10px;
    padding-right: 30px;
}

span {
    position: relative;
}

span:after {
    font-family: FontAwesome;
    content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
    font-size: 13px;
    position: absolute;
    right: 20px;
    top: 1px;
    pointer-events: none;
}

Demo

Şimdi burada her şey burada açıklayıcı, bir mülk hakkında yani pointer-events: none; , :aftersözde oluşturulan içeriğin üzerine gelindiğinde düğmeniz tıklanmayacaktır, bu nedenle değerini kullanmak none, tıklama eylemini bu içerikten geçmeye zorlar .

itibaren Mozilla Geliştirici Ağı :

Öğenin, fare olaylarının hedefi olmadığını belirtmenin yanı sıra, none değeri, fare olayına öğeyi "geçmesini" ve bunun yerine o öğenin altında "her şeyi" hedeflemesini bildirir.

Kalp yazı tipini / simgesini üzerine getirin ve DemoKULLANMAYseniz ne olacağını görünpointer-events: none;

Düğme sınıflarını btn-linkve btn-xstürünü kullanarak submit, içinde bir simge bulunan küçük bir görünmez düğme oluşturabilirsiniz. Misal:

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>

Bunun gibi de mümkün

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

Birden fazla gönderimde, seçilen gönderinin değerine ihtiyacınız olduğunda, bu oldukça kolay bir şekilde yapılabilir. Formunuzda gizli bir alan oluşturun ve hangi düğmenin tıklandığına bağlı olarak değerini değiştirin. Örneğin, formda, sahip olduğunuzu varsayalım:

<input type="hidden" id="Clicked" name="Clicked" value="" />
<button type="submit" class="btn btn-success ClickCheck" id="Create"> <i class="fa fa-file-pdf-o"> Create Bill</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Reset"> <i class="fa fa-times"> Reset</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="StoreData"> <i class="fa fa-archive"> Save</i></button>

JQuery kullanma:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>

Ardından "Tıklandı" yayın değişkeninde tıklatılan düğmenin değerini alabilirsiniz