Giriş Kutusu için Bootstrap Glyphicon Ekle

Nasıl bir metin yazın giriş kutusu için bir glyphicon ekleyebilir miyim? İstiyorum 'icon-user' kullanıcı adı bir giriş, bir şey bu . örneğin

enter image description here

CEVAP

17 EYLÜL 2013, Salı

Bootstrap Olmadan:

İkinci bir Bootstrap alacağız, ama burada bunu kendiniz yapmak için oyunda temel CSS kavramlarını. beard of prey points out, kesinlikle giriş elemanı içinde simge konumlandırma tarafından CSS ile bunu yapabilirsiniz. Metin simgesi ile değil üst üste bu kadar eklemek iki tarafına da dolgu.

Aşağıdaki HTML için:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

Aşağıdaki CSS ve semboller soldan sağa hizalamak için kullanabilirsiniz:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Demo in Plunker

NotBu aynı zamanda glyphicons ama çalışır font-awesome ile kullandığınız varsayılmaktadır.
FA için, sadece .fa .glyphicon değiştirin

Bootstrap İle:

buffer points out, Bu gerçekleştirilebilir özgün Validation States with Optional Icons kullanarak Bootstrap içinde. Bu .form-group eleman .has-feedback ve simgenin sınıf vererek yapılır .form-control-feedback sınıf.

En basit örnek bu gibi bir şey olacaktır:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Artıları:

Farklı form türleri (Temel, Yatay, Satır İçi için destek içerir
İçerir farklı kontrol boyutları (Varsayılan) Küçük, Büyük destek

İnş:

İçin destek içermezsolhizalama simgeleri

Eksileri aşmak için, birlikte sola dayalı simgeler destek için değişiklik pull-request bunu koydum. Nispeten büyük bir değişiklik olduğu gibi, eğer bu özelliklere ihtiyacınız varsa, gelecekteki bir sürüm kadar ertelendi, ama oldubugünburada basit bir uygulama kılavuzu:

Eğer az kullanıyorsanız, sadece projede these changes vardır. Eğer az kullanıyorsanız, dosyayı alıp online LESS Compiler ile CSS dönüştürmek.

Sonra, tüm yapmanız gereken simgesini sola hizalamak için 12 ** sınıf, herhangi bir grup sınıf .has-feedback-left vardır.

Beri orada bir sürü Olası html yapılandırmaları farklı form türleri, farklı kontrol boyutları, farklı simge setleri ve farklı bir etiket visibilities, ben oluşturulan bir test sayfası gösteren doğru ayarlanmış HTML için her permütasyon ile birlikte bir canlı demo.