[HTML] Font Awesome icon all'interno di una dropdown

robertino_salemi · 08-07-2019, 13:53

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!

Codice:

<!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.

Kaya · 08-07-2019, 14:02

Sei obbligato ad agire in quel modo?
Perchè non so darti risposta al tuo quesito, ma ti suggerirei di usare bootstrap che fa quello che ti serve con l'immagine che preferisci...

]Rik`[ · 08-07-2019, 17:11

non è possibile farlo, l'unica cosa su firefox mi pare sia quella di impostare l'immagine come background-image di ogni option ma mi sembra che non funzioni più nemmeno questo trick.

ci vogliono soluzioni un po' più complesse, ti conviene guardare qualcosa tipo questo https://github.com/aslamswt/Responsi...wn-with-Images

robertino_salemi · 09-07-2019, 09:11

Posso anche utilizzare bootstrap, non è un problema.

Ho provato, sono riuscito a visualizzare l'icona, ma non riesco a colorarla.

Codice:

<div class="col-md-4 mb-3">
     <label>Tipologia</label>
          <select class="form-control" id="addNewEventType" required style='height: 45px; font-family:Arial, FontAwesome;'>>
                <option></option>
          </select>
</div>

Il popolamento della stessa avviene tramite una chiamata ajax:

Codice:

var dropdown = $('#addNewEventType');
            $.each(result, function () {
                dropdown.append(
                    /*$("<option></option>").html("<span style=\"color:" + this.Colore + "\">&#xf0c8;</span> " + this.Descrizione ).val(this.Codice)*/
                    $("<option></option>").html("&#xf0c8; &nbsp; " + this.Descrizione).val(this.Codice)
                );
            });

Grazie.

airon · 09-07-2019, 12:52

Ciao,

se usi una select normale devi usare i caratteri unicode ma puoi cambiare colore a tutta la option compreso eventuale testo.
In una option non puoi avere altri TAG, solo testo!

Qui un semplice JSFiddle.

https://jsfiddle.net/9obt7kf6/

Volendo potresti usare classi per singola option e pseudoelemento :after in linea teorica ma non ricordo la compatibilità, sopratutto lato IE. Si usa altro...

Ti consiglio invece di usare la libreria JS select2 in modo da poter gestire ogni aspetto nei migliore dei modi, visto che il TAG select non lo puoi modificare più di tanto. E' ormai lo standard e ci sono wrapper per ogni libreria.

Kaya · 09-07-2019, 14:04

Magari sono scemo io e non capisco la domanda ma..

https://thdoan.github.io/bootstrap-select/examples.html -> Select with Thumbnails

non fa esattamente quello che ti serve?

airon · 09-07-2019, 14:19

Si ma infatti non sono delle select normali bensì c'é dietro un JS che trasforma le select in div/span.

Una classica select e relativa option non si possono stilare così.

Ciao

Kaya · 09-07-2019, 15:50

Comprendo, però in questo modo ottiene ciò che gli serve?

airon · 09-07-2019, 15:58

Quote:

Originariamente inviato da Kaya

Comprendo, però in questo modo ottiene ciò che gli serve?

Si si

robertino_salemi · 10-07-2019, 09:27

Grazie ragazzi, perfetto, vediamo se la soluzione con option tutta colorata va bene, altrimenti utilizzerò una libreria esterna.

robertino_salemi · 12-07-2019, 10:41

Per ogni option sono riuscito ad inserire l'icona colorata prima del testo, il problema è che viene colorata l'intera option.

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

Vorrei però colorare solo l'icona prima del testo....

Sto utilizzando Bootstrap e Font Awesome, qualche suggerimento?

Grazie.

airon · 12-07-2019, 11:15

Quote:

Originariamente inviato da robertino_salemi

Per ogni option sono riuscito ad inserire l'icona colorata prima del testo, il problema è che viene colorata l'intera option.

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

Vorrei però colorare solo l'icona prima del testo....

Sto utilizzando Bootstrap e Font Awesome, qualche suggerimento?

Grazie.

Ciao, non è possibile!
Visto che usi bootstrap usa bootstrap-select e ci fai quello che vuoi.

robertino_salemi · 12-07-2019, 11:57

Va bene, proverò con questa libreria!
Grazie.

09-07-2019, 12:52	#5
airon Senior Member Iscritto dal: Feb 2004 Città: milano Messaggi: 2148	Ciao, se usi una select normale devi usare i caratteri unicode ma puoi cambiare colore a tutta la option compreso eventuale testo. In una option non puoi avere altri TAG, solo testo! Qui un semplice JSFiddle. https://jsfiddle.net/9obt7kf6/ Volendo potresti usare classi per singola option e pseudoelemento :after in linea teorica ma non ricordo la compatibilità, sopratutto lato IE. Si usa altro... Ti consiglio invece di usare la libreria JS select2 in modo da poter gestire ogni aspetto nei migliore dei modi, visto che il TAG select non lo puoi modificare più di tanto. E' ormai lo standard e ci sono wrapper per ogni libreria. Ultima modifica di airon : 09-07-2019 alle 13:02. Motivo: Link sbagliato e altre cose

09-07-2019, 14:19	#7
airon Senior Member Iscritto dal: Feb 2004 Città: milano Messaggi: 2148	Si ma infatti non sono delle select normali bensì c'é dietro un JS che trasforma le select in div/span. Una classica select e relativa option non si possono stilare così. Ciao Ultima modifica di airon : 09-07-2019 alle 14:29.

08-07-2019, 14:02	#2
Kaya Senior Member Iscritto dal: Apr 2005 Messaggi: 3292	Sei obbligato ad agire in quel modo? Perchè non so darti risposta al tuo quesito, ma ti suggerirei di usare bootstrap che fa quello che ti serve con l'immagine che preferisci...

08-07-2019, 17:11	#3
]Rik`[ Senior Member Iscritto dal: Mar 2003 Città: Perugia Messaggi: 16302	non è possibile farlo, l'unica cosa su firefox mi pare sia quella di impostare l'immagine come background-image di ogni option ma mi sembra che non funzioni più nemmeno questo trick. ci vogliono soluzioni un po' più complesse, ti conviene guardare qualcosa tipo questo https://github.com/aslamswt/Responsi...wn-with-Images

09-07-2019, 14:04	#6
Kaya Senior Member Iscritto dal: Apr 2005 Messaggi: 3292	Magari sono scemo io e non capisco la domanda ma.. https://thdoan.github.io/bootstrap-select/examples.html -> Select with Thumbnails non fa esattamente quello che ti serve?

09-07-2019, 15:50	#8
Kaya Senior Member Iscritto dal: Apr 2005 Messaggi: 3292	Comprendo, però in questo modo ottiene ciò che gli serve?

10-07-2019, 09:27	#10
robertino_salemi Senior Member Iscritto dal: Apr 2009 Città: Aci Catena (CT) Messaggi: 1021	Grazie ragazzi, perfetto, vediamo se la soluzione con option tutta colorata va bene, altrimenti utilizzerò una libreria esterna.

12-07-2019, 10:41	#11
robertino_salemi Senior Member Iscritto dal: Apr 2009 Città: Aci Catena (CT) Messaggi: 1021	Per ogni option sono riuscito ad inserire l'icona colorata prima del testo, il problema è che viene colorata l'intera option. Qui la demo: https://jsfiddle.net/robertinosalemi/sb60ztwp/4/ Vorrei però colorare solo l'icona prima del testo.... Sto utilizzando Bootstrap e Font Awesome, qualche suggerimento? Grazie.

12-07-2019, 11:57	#13
robertino_salemi Senior Member Iscritto dal: Apr 2009 Città: Aci Catena (CT) Messaggi: 1021	Va bene, proverò con questa libreria! Grazie.

Strumenti
Mostra una versione stampabile Invia questa pagina per email