Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menambah Ikon Hebat Font untuk Memilih Pilihan Jatuh Bawah Hanya Menggunakan CSS?

Bagaimanakah Saya Boleh Menambah Ikon Hebat Font untuk Memilih Pilihan Jatuh Bawah Hanya Menggunakan CSS?

Linda Hamilton
Lepaskan: 2024-12-11 02:14:09
asal
556 orang telah melayarinya

How Can I Add Font Awesome Icons to Select Dropdown Options Using Only CSS?

Menambah Ikon Hebat Fon untuk Memilih Pilihan Jatuh Turun

Matlamat anda adalah untuk memasukkan ikon tanda tanda ke bawah ke dalam pilihan pertama elemen pilih sebagai digambarkan dalam gambar di bawah. Walau bagaimanapun, anda tidak dapat memaparkan ikon dalam biola contoh anda.

Mari kita terokai cara mencapai ini semata-mata dengan CSS:

Untuk memaparkan ikon Font Hebat dalam menu lungsur pilih, manfaatkan Unicode perwakilan. Sebagai contoh, gunakan  untuk memaparkan ikon tanda ke bawah:

select {
  font-family: "FontAwesome", "Second Font Name";
}
Salin selepas log masuk
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select>
  <option>Hi, &#xf042;</option>
  <option>Hi, &#xf043;</option>
  <option>Hi, &#xf044;</option>
  <option>Hi, &#xf045;</option>
  <option>Hi, &#xf046;</option>
</select>
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Ikon Hebat Font untuk Memilih Pilihan Jatuh Bawah Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan