Yer Tutucuda Font Awesome Simgesini Kullan

Bir Yer Tutucuda Font Awesome Simgesi kullanmak mümkün müdür? Yer tutucuda HTML'ye izin verilmediğini okudum. Bir çözüm var mı?

placeholder="<i class='icon-search'></i>"

Bir yer tutucunun bir kısmına farklı bir yazı tipi uygulayamayacağınız için bir simge ve metin ekleyemezsiniz, ancak yalnızca bir simgeden memnunsanız, o zaman işe yarayabilir. FontAwesome simgeleri yalnızca özel bir yazı tipine sahip karakterlerdir ( kuraldaki kaçan Unicode karakteri için FontAwesome Cheatsheet'e bakabilirsiniz content. Daha az kaynak kodunda değişkenlerde bulunur. Daha az Zorluk , girdi olduğunda yazı tiplerini değiştirmek olacaktır. boşaltmazlar. gibi jQuery ile birleştirin bu .

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
  </div>
</form>

Bu CSS ile:

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

Ve bu (basit) jQuery

$('#iconified').on('keyup', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

Ancak yazı tipleri arasındaki geçiş düzgün olmayacaktır.

Eğer kullanıyorsanız FontAwesome 4.7bu yeterli olmalıdır:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

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

Font Awesome kopya sayfasında onaltılık kodların bir listesi bulunabilir . Ancak, en son FontAwesome 5.0'da bu yöntem çalışmaz (güncellenmiş ile birlikte CSS yaklaşımını kullansanız bile font-family).

Bu yöntemle çözdüm:

CSS'de fontAwesome sınıfı için bu kodu kullandım :

.fontAwesome {
  font-family: 'Helvetica', FontAwesome, sans-serif;
}

HTML'de fontawesome sınıfını ve fontawesome simge kodunu yer tutucunun içine ekledim :

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">

CodePen'de görebilirsiniz .

@ Elli'nin cevabı FontAwesome 5'te çalışabilir, ancak doğru yazı tipi adını ve istediğiniz sürüm için belirli CSS'yi kullanmayı gerektirir. Örneğin FA5 Free'yi kullanırken, all.css'yi dahil edersem çalışmasını sağlayamazdım, ancak solid.css'yi dahil edersem iyi çalıştı:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">

<input type="text" placeholder="&#xF002; Search" style="font-family: Arial, 'Font Awesome 5 Free'" />

FA5 Pro için yazı tipi adı 'Font Awesome 5 Pro'dur

Desteklendiği yerlerde, ::input-placeholdersözde seçiciyi ile birlikte kullanabilirsiniz ::before.

Bir örneğe bakın:

http://codepen.io/JonFabritius/pen/nHeJg

Sadece bunun üzerinde çalışıyordum ve bu makaleyi değiştirdiğim bu makaleye rastladım:

http://davidwalsh.name/html5-placeholder-css

Ember (sürüm 1.7.1) kullanıyorum ve hem girdinin değerini bağlamam hem de FontAwesome simgesi olan bir yer tutucuya sahip olmam gerekiyordu. Ember'daki değeri bağlamanın tek yolu (bildiğim kadarıyla) yerleşik yardımcıyı kullanmaktır. Ancak bu, yer tutucudan kaçılmasına neden olur, "& # xF002" aynen böyle bir metin görünür.

Ember kullanıyor veya kullanmıyorsanız, giriş yer tutucusunun CSS'sini FontAwesome font ailesine sahip olacak şekilde ayarlamanız gerekir. Bu, SCSS'dir ( yer tutucu stili için Bourbon'u kullanır ):

    input {
      width:96%;
      margin:5px 2%;
      padding:0 8px;
      border:1px solid #444;
      border-radius: 14px;
      background: #fff;
      @include placeholder {
        font-family: 'FontAwesome', $gotham;
      }
    }

Sadece gidon kullanıyorsanız, daha önce belirtildiği gibi html varlığını yer tutucu olarak ayarlayabilirsiniz:

<input id="listFilter" placeholder="&#xF002;" type="text">

Ember kullanıyorsanız, yer tutucuyu unicode değerine sahip bir controller özelliğine bağlayın.

şablonda:

{{text-field
  id="listFilter"
  placeholder=listFilterPlaceholder
  value=listFilter}}

denetleyicide:

listFilter: null,
listFilterPlaceholder: "\uf002"

Ve değer bağlama iyi çalışıyor!

Girişinizde kullanın placeholder="". Unicode'u FontAwesome sayfasında bulabilirsiniz http://fontawesome.io/icons/ . Ancak girdinizi eklediğinizden emin olmalısınız style="font-family: FontAwesome;".

Bunu fa-placeholder, giriş metnine sınıf ekleyerek yapıyorum :

<input type="text" name="search" class="form-control" placeholder="&#xF002;" />

yani, css'de şunu ekleyin:

.fa-placholder { font-family: "FontAwesome"; }

Benim için iyi çalışıyor.

Güncelleme:

Kullanıcı metin girişinizi yazarken yazı tipini değiştirmek için, harika yazı tipinden sonra yazı tipinizi eklemeniz yeterlidir.

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }

Font Awesome 5 uygulamasını merak eden herkes :

Genel bir "Font Awesome 5" yazı tipi ailesi belirtmeyin, özellikle birlikte çalıştığınız simge dalıyla bitirmeniz gerekir. Burada mesela "Markalar" şubesini kullanıyorum.

<input style="font-family:'Font Awesome 5 Brands' !important" 
       type="text" placeholder="&#xf167">

Daha fazla ayrıntı Giriş yer tutucu metninde Font Awesome (5) simgesini kullanın

JQuery göz ardı edilerek bu, ::placeholderbir giriş öğesi kullanılarak yapılabilir .

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control name" placeholder="&#xF002;"/>
  </div>
</form>

Css bölümü

input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }

input.name{ font-family:[font family you want to specify] }

EN İYİ BÖLÜM: Yer tutucu ve metin için farklı yazı tipi ailesine sahip olabilirsiniz

Bu sorunun çok eski olduğunu biliyorum. Ama eskiden kullandığım gibi basit bir cevap görmedim.

Sadece fassınıfı girdiye eklemeniz ve bu durumda Font-Awesome'in glifi için buradaki gibi geçerli bir onaltılık koymanız yeterlidir.&#xf002<input type="text" class="fas" placeholder="&#xf002" />

Her glifin unicode'unu burada resmi web'de bulabilirsiniz .

Bu, css veya javascript'e ihtiyacınız olmayan basit bir örnektir.

input {
  padding: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form role="form">
  <div class="form-group">
    <input type="text" class="fas" placeholder="&#xf002" />
  </div>
</form>

Jason'ın verdiği cevapta yazı tipi değiştikçe biraz gecikme ve şaka yaşanıyor. "Keyup" yerine "değiştir" olayını kullanmak bu sorunu çözer.

$('#iconified').on('change', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

Bir yer tutucuya hem metni hem de simgeyi ekledim.

placeholder="Edit   "

CSS:

font-family: FontAwesome,'Merriweather Sans', sans-serif;

Bootstrap'i kullanabiliyorsanız / kullanmak istiyorsanız, çözüm girdi grupları olacaktır:

<div class="input-group">
 <div class="input-group-prepend">
  <span class="input-group-text"><i class="fa fa-search"></i></span>
  </div>
 <input type="text" class="form-control" placeholder="-">
</div>

Şuna benzer: metin-başa ve arama sembolüyle giriş

Sorunu biraz farklı çözdüm ve html kodu aracılığıyla herhangi bir FA simgesiyle çalışıyor. Yer tutucu ile ilgili tüm bu zorluklar yerine benim çözümüm:

1. Her zamanki gibi bir simge yerleştirmek için

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;
}
.block__input {
  padding: some-corrections;
}

2. Ardından yer tutucunun metnini ayarlayın (herkes için kişiseldir, benim durumumda bir simge metnin hemen önündeydi)

HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...

3. Girdiğimizin üzerinde bir simgenin olması ve imlecin tıklanmasını engellemesi sorunu, CSS'mize bir satır daha eklemeliyiz.

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;

  /* The new line */
  pointer-events: none;
}

4. Ancak bir simge yer tutucuyla birlikte kaybolmaz, bu yüzden onu düzeltmemiz gerekir. Ve ayrıca bu benim çözümümün son sürümü :

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="    Some text">

CSS
.block__icon {
  position: absolute;
  z-index: 2; /* New line */
  margin: some-corrections;
}
.block__input {
  position: relative; /* New line */
  z-index: 2; /* New line */
  padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
    z-index: 1;
}

Daha önce düşündüğümden daha zor, ama umarım bu konuda herkese yardım etmişimdir.

Codepen: https://codepen.io/dzakh/pen/YzKqJvy

Teocci çözümü olabildiğince basittir, bu nedenle herhangi bir CSS eklemeye gerek yoktur, öğeye uygun CSS yazı tipi bildirimi eklediği için Font Awesome 5 için class = "fas" eklemeniz yeterlidir.

Burada, hem giriş grubuna hem de yer tutucusuna arama simgesinin eklendiği, Bootstrap gezinme çubuğundaki arama kutusu için bir örnek verilmiştir (tabii ki gösterme uğruna, hiç kimse aynı anda ikisini birden kullanmaz). Resim: https://i.imgur.com/v4kQJ77.png "> Kod:

<form class="form-inline my-2 my-lg-0">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
        </div>
        <input type="text" class="form-control fas text-right" placeholder="&#xf002;" aria-label="Search string">
        <div class="input-group-append">
            <button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
        </div>
    </div>
</form>

Bazen aşağıdaki hileyi kullanabileceğiniz zaman her şeyden önce cevap uyandırmıyor

.form-group {
  position: relative;
}

input {
  padding-left: 1rem;
}

i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="search">
    <i class="fas fa-search"></i>
  </div>
</form>