Icon destekleyen Selectbox nasıl yapılır?

emircan1905 (1) 6 yıl önce sordu

Sitemde selectbox var, fakat icon desteklemiyor. Örneğin: "<i class="fab fa-instagram"></i> Test"  kodunu yazdığımda İcon ile birlikte Test yazması lazım. Ama şu şekilde gösteriyor: <i class="fab fa-instagram"></i> Test

 

Icon desteklemesi için ne yapmam lazım?

alattin 6 yıl önce

Tam kodu paylasir misin?

emircan1905 6 yıl önce

Tam kod: https://codepen.io/emirnar1905/pen/mQWBKz

Toplam 1 cevap


alattin (17125) 6 yıl önce cevapladı

Yorumunda @alattin şeklinde benden bahsetmediğin için mesajını geç gördüm.

Select içinde ikon kullanmak istiyorsan sana şunu önerebilirim: https://developer.snapappointments.com/bootstrap-select/

Önce şu JS ve CSS linklerini ekle:
 


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

Daha sonra şu şekilde select'i oluştur:
 

<select class="selectpicker">
  <option data-icon="fa-heart">Ketchup</option>
</select>

Bu bootstrap kullanıyorsan kullanabileceğin güzel bir kontrol.

Yok kullanmıyorsan daha basitçe şunu yapabilirsin:

CSS

select {
  font-family: 'FontAwesome', 'Second Font name'
}

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select>
  <option> &#xf042; uzmanim.net</option>
  <option> &#xf043; uzmanim.net,</option>
  <option> &#xf044; uzmanim.net</option> 
</select>

Örnek: https://codepen.io/anon/pen/JeWxgp

emircan1905 6 yıl önce

@alattin Ben bu Kategorileri ve iconları Admin Panelinden Ekliyorum. Admin panelinde iconlar gözüküyor fakat dediğim gibi ana sayfada icon yerine icon kodu yazıyor. Denedim fakat olmadı.