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

0

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?

emircan1905 emircan1905 (1)
5 yıl önce sordu

  • Tam kodu paylasir misin? alattin 5 yıl önce
  • Tam kod: https://codepen.io/emirnar1905/pen/mQWBKz emircan1905 5 yıl önce

Toplam 1 Cevap


0

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

alattin alattin (16984)
5 yıl önce cevaplandı

  • @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ı. emircan1905 5 yıl önce
üyelik gerektirir

Cevap yazabilmek için üye girişi yapmalısınız.

Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol