Font Awesome icon all'interno di una dropdown

felino

Font Awesome icon all'interno di una dropdown

Ciao!
Vorrei visualizzare un'icona all'interno di una dropdown, ma non riesco a in alcun modo.

Avevo trovato una soluzione utilizzando il carattere unicode, ma non riesco a cambiare colore!


<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>


<h1>fa fa-square</h1>


<i class="fa fa-square"></i>
<i class="fa fa-square" style="font-size:24px"></i>
<i class="fa fa-square" style="font-size:36px;"></i>
<i class="fa fa-square" style="font-size:48px;color:red"></i>
<br>


<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-square"></i></button>


<p>Unicode:</p>
<select>
<option><i class="fa fa-square"></i> TEST</option>
</select>


</body>
</html>

Qui il https://jsfiddle.net/robertinosalemi/sb60ztwp/ per la demo..

Grazie.

ultima

Ciao felino, ti ho modificato e salvato la demo su jsfiddle usando la modalità collabirativa.
Comunque ti è sufficiente usare questa logica:


<select class="fa">
<option>&#xf0c8 TEST</option>
<option>&#xf0c8 TEST2</option>
<option>&#xf0c8 TEST3</option>
<option>&#xf0c8 TEST4</option>
<option>&#xf0c8 TEST5</option>
<option>&#xf0c8 TEST6</option>
</select>

felino

Ciao Ultima come va? Grazie!!!

Ma se volessi modificare il colore dinamicamente, pensi sia possibile?

ultima

Certo che puoi cambiare colore. Ma Aimè, lo dai a tutto il contenuto del "option".
Qui un esempio: https://jsfiddle.net/stefanopascazi/h3b5spgw/1/

felino

Grazie, va benissimo al momento come soluzione!

felino

@ultima, cambio di idea... vorrei colorare solo il quadratino prima del testo....

Qui la demo: https://jsfiddle.net/robertinosalemi/sb60ztwp/4/

Avevo trovato una guida che utlizza un elenco puntato al posto della select, ma non sono più riuscito a reperirla.

Sto utilizzando Bootstrap e Font Awesome, qualche suggerimento?

ultima

Ciao felino, ti spiego.
La sfortuna di quello che chiedi è che all'interno del marker "option" non sono ammessi codici html secondo lo standard del w3c, quindi anche ammesso che con un sistemino in javascript funzioni, rischi di creare problemi di compatibilità cross browser.
La sola soluzione che mi viene in mente è quella di utilizzare un plugin per jQuery. A quel punto, siccome la maggior parte crea delle select tramite delle liste (ul), puoi lavorarle come ti pare. Un buon plugin che ti permette di lavorarci discretamente è selectric https://selectric.js.org/, ma se proprio devo essere sincero, a meno che, non sia una vera specifica richiesta da un dato cliente, eviterei di appesantire il sito con un ennesimo js aggiuntivo. Però il plugin che ti ho indicato, fa esattamente quello che chiedi in termini di visualizzazione.
Fammi sapere.

felino

Grazie sempre per i tuoi consigli.
Darò un'occhiata al plugin e vedrò di capire se è strettamente necessaria questa feature.