web-gelistirme-sc.com

Yazı tipi harika, giriş türü 'Gönder'

Font-awesome'da 'cancel' giriş türü için sınıf yok gibi görünüyor. Bazı girdilerin düğme girişi için font-awesome'dan kullanılması mümkün müdür? Uygulamalarımdaki tüm düğmelere (aslında Twitter-bootstrap'dan 'btn' sınıfı ile bağlanan) uygulamalara simgeler ekledim, ancak 'giriş türü gönder' üzerine simgeler ekleyemiyorum. 

Veya bu kodun nasıl kullanılacağı:

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 çektiğim metin: Resimdeki metin + resimli bir gönder butonu nasıl yapılır? ) font-awesome ile?

180
denis.peplin

use yerine type type = "delivery" kullanın

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

yazı Başar 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>
304
Joao Leme

HTML

<input> öğesi yalnızca değer niteliğinin değerini görüntülediğinden, yalnızca onu değiştirmemiz gerekir:

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

Buradaki &#xf043; varlığını kullanıyorum, bu da Font Awesome'nin 'tonu' sembolü olan U + F043'e karşılık gelir.

CSS

O zaman yazı tipini kullanmak için onu stillendirmeliyiz:

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

Bu bize Yazı Tipindeki renk tonu sembolünü ve diğer yazı tipini uygun yazı tipinde verir.

Ancak, bu kontrol piksel açısından mükemmel olmayacak, bu yüzden kendiniz düzeltmek zorunda kalabilirsiniz.

77
Pavlo

Yazı tipi harika utf cheatheet kullanabilirsiniz 

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

işte cheatsheet http://fortawesome.github.io/Font-Awesome/cheatsheet/

48
Bernard Nongpoh

Teknik olarak, :before ve :after sözde elemanlarının inputelements üzerinde çalışması mümkün değil

W3C 'den:

12.1: öncesi ve: sahte unsurlardan sonra

Yazarlar, üretilen içeriğin stilini ve konumunu: before ve: after sözde elemanlarıyla belirtirler. İsimlerinin gösterdiği gibi: before ve: after sözde elemanlar bir elemanın belge ağacı içeriğinden önce ve sonra içeriğin konumunu belirtir. 'Content' özelliği, sözde elemanlarla birlikte, ne ekleneceğini belirtir.


Bu yüzden inputetiketi biçiminde düğme gönderdiğim bir projem vardı ve nedense diğer geliştiriciler normal giriş gönderme düğmeleri yerine <button> etiketlerini kullanmamı yasakladı, ben de düğmeleri içerisine sararak başka bir çözüm buldum. a spanposition: relative; olarak ayarlandı ve sonra kesinlikle :after sözde kullanarak simgesini konumlandırın.

Not: Demo kemanı FontAwesome 3.2.1 için içerik kodunu kullanır, bu nedenle contentözelliğinin değerini uygun şekilde değiştirmeniz gerekebilir.

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ıdır, bir özellik hakkında, yani, pointer-events: none;, yani, :after sözde oluşturulan içeriğin üzerine geldiğinde, düğmenizin tıklamayacağı için kullandım, bu nedenle nonedeğeri kullanıldığında, tıklama işleminin geçmesi için zorlanacak Bu içerik sayesinde.

Mozilla Geliştirici Ağı'ndan :

Öğenin, fare olaylarının hedefi olmadığını göstermenin yanı sıra, none değeri, fare olayına öğeyi "geçmesi" için talimat verir ve bunun yerine "altında" olanı hedefler.

Kalp fontunu/simgesini gezdirin  Deneme  ve pointer-events: none; kullanmazsanız ne olacağını görün

12
Mr. Alien

btn-link ve btn-xs düğme sınıflarını submit türünde kullanabilirsiniz, bunun içinde simgesi olan küçük bir görünmez düğme olur. Örnek:

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

Bunun gibi de mümkün 

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

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

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

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

Sonra "Tıklanan" yazı değişkeninde tıklatılan düğmenin değerini alabilirsiniz.

0
RationalRabbit