Chciałbym użyć ikony czcionki "fa-chevron-down" zamiast domyślnego stylu html select. Zobacz załączony obraz.Czy można zamiast tego użyć ikony Font Awesome, aby wybrać domyślny znak rozwijany?
5
A
Odpowiedz
9
Można to zrobić z klas pseudo. Śledziłem czynności here i modyfikowane poprzez usunięcie transformacji, używając FontAwesome jak mój czcionki i UTF-8 na ikonie jako zawartość as instructed here:
select {
padding:4px;
margin: 0;
background: #fff;
color:#888;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
width: 150px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
}
label {position:relative}
label:after {
content:"\f078";
font-family: "FontAwesome";
font-size: 11px;
color:#aaa;
right:8px; top:4px;
padding:0 0 2px;
position:absolute;
pointer-events:none;
}
label:before {
content:'';
right:4px; top:0px;
width:23px; height:18px;
background:#fff;
position:absolute;
pointer-events:none;
display:block;
}
+0
przykład umieszcza ikonę rozwijaną na moich etykietach, a nie na moich polach wyboru – rtaft
Powiązane problemy
- 1. Jak używać ikony czcionki (font-awesome) w selektorze kodu XML
- 2. Co to jest alias w font-awesome?
- 3. font awesome animowane pokrętło w tle
- 4. Zestaw Font Awesome 5 za pośrednictwem NPM
- 5. Czy można użyć std :: enable_if, aby wybrać specjalizację szablonów członków?
- 6. Obracanie Glyphicons/Font Awesome w Bootstrapie
- 7. Dołącz font-awesome w bootstrap sass przez Bower
- 8. Bootstrap i font-awesome w MVC4
- 9. Font Awesome vs Glyphicons na Twitterze Bootstrap
- 10. Reaguj-stwórz-app używając font-awesome
- 11. Jak dodać efekt hover do Font Awesome?
- 12. Jak dodać font-awesome do JsFiddle
- 13. Używanie ikony czcionki (Font Awesome) wygląda na nieco rozmytą i zbyt odważną
- 14. Nie można rozszerzyć wyliczenia; co powinienem zamiast tego użyć?
- 15. Czy można ustawić domyślny typ wyliczenia jako niepodpisany znak?
- 16. Czcionka Awesome i i3bar
- 17. Jak poprawnie zarejestrować font-awesome dla md-icon?
- 18. Font-Awesome Jak uzyskać czcionki na dużą skalę?
- 19. Układanie Font-Wypasione Gwiezdne ikony (fa-Star & fa-star-połowa)
- 20. setDefaultCloseOperation, aby wyświetlić JFrame zamiast tego
- 21. Jak skompensować nakładające się ikony z czcionką Awesome?
- 22. Czy można użyć "mov eax, 0x1" zamiast "mov rax, 0x1"?
- 23. Nie można użyć kolejności według tego wyboru?
- 24. Czy można wybrać EXISTS bezpośrednio?
- 25. Czy zamiast z-index można użyć css3 translateZ()?
- 26. node.js fs.exists() będzie przestarzałe, co należy zamiast tego użyć?
- 27. CookieSyncManager jest teraz przestarzałe, co mogę zamiast tego użyć?
- 28. Czy można użyć SFINAE/szablonów, aby sprawdzić, czy operator istnieje?
- 29. GLSL - texture1D jest przestarzałe, co należy zamiast tego użyć?
- 30. Arguments.callee jest przestarzałe - co należy zamiast tego użyć?
możliwe duplikatu [Przykład stylu strzałki box] (http://stackoverflow.com/questions/11185906/select-box-arrow-style) – Vucko