Metin türü giriş kutusuna bir glif ikonu nasıl ekleyebilirim? Örneğin, bir kullanıcı adı girişinde 'icon-user' olmasını istiyorum, şöyle bir şey:

Bootstrap olmadan:

Bir saniyede Bootstrap'a gideceğiz, ancak işte bunu kendiniz yapmak için temel CSS kavramları. Gibi yırtıcı sakal işaret , kesinlikle giriş elemanının simge içini konumlandırarak CSS ile bunu yapabilirsiniz. Ardından, metnin simgeyle çakışmaması için her iki tarafa da dolgu ekleyin.

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>

Glifleri sola ve sağa hizalamak için aşağıdaki CSS'yi 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; }

Plunker'da Demo

Not : Bu , glifikon kullandığınızı varsayar , ancak font-awesome ile eşit derecede iyi çalışır .
FA için, sadece değiştirmek .glyphiconile.fa

Bootstrap ile:

Arabellek işaret ettiği gibi , bu isteğe bağlı Simgeler ile Doğrulama Durumları kullanılarak Bootstrap içinde doğal olarak yapılabilir . Bu, .form-groupöğeye sınıfı .has-feedbackve simgesine sınıfı vererek yapılır .form-control-feedback.

En basit örnek şöyle bir şey olurdu:

<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ıriçi) desteği içerir
• Farklı kontrol boyutları için destek içerir (Varsayılan, Küçük, Büyük)

Eksileri :

• Sola hizalanan simgeler için destek içermez

Eksilerini aşmak için, bu çekme isteğini sola hizalanmış simgeleri desteklemek için değişikliklerle bir araya getirdim . Nispeten büyük bir değişiklik olduğundan, gelecekteki bir sürüme kadar ertelendi, ancak bugün bu özelliklere ihtiyacınız varsa , basit bir uygulama kılavuzu:

Sadece bu form değişikliklerini css'e ekleyin (ayrıca altta gizli yığın snippet'i ile satır içi)
_{* DAHA AZ : alternatif olarak, eğer daha azıyla inşa ediyorsanız , form değişiklikleri daha az}

Sonra tek yapmanız gereken , simgeyi sola hizalamak için sınıfı .has-feedback-leftolan herhangi bir gruba sınıfı dahil etmektir .has-feedback.

Farklı form türleri, farklı kontrol boyutları, farklı simge setleri ve farklı etiket görünürlükleri üzerinde birçok olası html yapılandırması olduğundan, canlı bir demo ile birlikte her permütasyon için doğru HTML setini gösteren bir test sayfası oluşturdum.

İşte Plunker'da bir demo

PS frizi önerisi ekleme pointer-events: none;olmuştur bootstrap eklendi

Aradığınızı bulamadınız mı? Benzer soruları deneyin:

• Giriş kutusuna Twitter Bootstrap simgesi ekleme
• Arama simgesini metin kutusu önyüklemesinin yanına koy

Sola Hizalanmış geri bildirim simgeleri için Ek CSS

.has-feedback .form-control {
  padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
  padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
  padding-right: 46px;
}
.has-feedback-left .form-control {
  padding-right: 12px;
  padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
  padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
  padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
  left: 0;
}
.form-control-feedback {
  line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
  top: 0;
}
@media (min-width: 768px) {
  .form-inline .inline-feedback {
    position: relative;
    display: inline-block;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .has-feedback-left .form-control-feedback {
  left: 15px;
}

Resmi yöntemi. Özel CSS gerekmez:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

DEMO: http://jsfiddle.net/LS2Ek/1/

Bu demo Bootstrap belgelerindeki bir örneğe dayanmaktadır. Burada "İsteğe Bağlı Simgelerle" aşağı kaydırın http://getbootstrap.com/css/#forms-control-validation

İşte sadece CSS alternatifi. Firefox'a benzer bir efekt elde etmek için bunu bir arama alanı için ayarladım (ve diğer yüz uygulama).

İşte bir keman .

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}

Ben sadece varsayılan bootstrap CSS v3.3.1 kullanarak nasıl yaptım:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

Ve işte böyle görünüyor:

Bu 'hile', glyphicon sınıfının giriş denetimi için yazı tipini değiştireceği yan etkiyle çalışır.

Vaktini boşa harcamak

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

Yan etkiden kurtulmak istiyorsanız, "glyphicon" sınıfını kaldırabilir ve aşağıdaki CSS'yi ekleyebilirsiniz (Yer tutucu sözde öğeyi biçimlendirmenin daha iyi bir yolu olabilir ve yalnızca Chrome'da test ettim).

Vaktini boşa harcamak

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

Muhtemelen daha temiz bir çözüm:

Vaktini boşa harcamak

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />

Herhangi bir özel css olmadan resmi bootstrap 3.x sürümünden sınıflar kullanılarak yapılabilir.

input-group-addonGirdi etiketinden önce kullanın , içinde input-groupglifikonlardan herhangi birini kullanın, işte kod

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

İşte çıktı

Özelleştirmek için kendi custom.css dosyanıza birkaç satır özel css ekleyin (gerekirse dolguyu ayarlayın)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

Saydamın arka planını input-group-addonyaparak ve giriş etiketinin sol eğimini sıfıra çevirerek, giriş kesintisiz bir görünüme sahip olacaktır. İşte özelleştirilmiş çıktı

İşte bir jsbin örneği

Bu, etiketlerle örtüşmenin, kullanırken hizalamanın input-lgve sekme sorununa odaklanmanın özel css sorunlarını çözecektir .

Burada, base64 URI kodlamasını kullanarak glificon'un görüntü temsilini doğrudan CSS'ye gömerek işaretlemenizi basitleştiren önyükleme olmayan bir çözümdür.

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}

<input class="search">

Fontawesome kullanıyorsanız bunu yapabilirsiniz:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

Sonuç

Unicode'un tam listesi Tam Font Awesome 4.6.3 simge başvurusunda bulunabilir

:beforeCSS'de sözde elemanı kullanarak glificon yerleştirerek bunu yapmanın başka bir yolu .

JSFiddle'da çalışma demosu

Bu HTML için:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

Bu CSS'yi kullanın ( Bootstrap 3.x ve Webkit tabanlı tarayıcılar uyumlu )

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

@Frizi'nin dediği gibi, pointer-events: none;imlecin giriş odağına müdahale etmemesi için eklemeliyiz . Diğer tüm CSS kuralları, uygun boşlukları ortalamak ve eklemek içindir.

Sonuç:

Unicode HTML'sini kullanabilirsiniz

Bir kullanıcı simgesi eklemek için placeholderözelliğe veya istediğiniz yere ekleyin .

Bu kopya sayfasını kontrol etmek isteyebilirsiniz .

Misal:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

Aşağıdaki kodu kullanarak girişin yazı tipini Glifikon'a ayarlamayı unutmayın: font-family: 'Glyphicons Halflings', ArialBurada Arial , girişteki normal metnin yazı tipidir.

Ayrıca Bootstrap 3.3.5 ile bu dava için bir karar var:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

Girişte böyle bir şey var:

Bootstrap 4 ile test edilmiştir.

A alın form-controlve is-validsınıfına ekleyin . Kontrolün yeşile döndüğüne dikkat edin, daha da önemlisi, kontrolün sağındaki onay işareti simgesine dikkat edin? İşte istediğimiz bu!

Misal:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>

Yalnızca modern tarayıcılara ihtiyaç duyacak kadar şanslıysanız: css transform translate'i deneyin. Bu, sarmalayıcı gerektirmez ve giriş döndürücüyü kullanmak veya giriş tutamacının soluna taşımak için giriş [type = number] için daha fazla boşluk bırakabilmeniz için özelleştirilebilir.

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

Bunu mevcut bootstrap sınıfları ve biraz özel stil ile yapabilmelisiniz.

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

Düzenle Simgeye icon-usersınıf aracılığıyla başvurulur . Bu yanıt Bootstrap sürüm 2 sırasında yazılmıştır. Referansı aşağıdaki sayfada görebilirsiniz: http://getbootstrap.com/2.3.2/base-css.html#images