PDA

View Full Version : [HTML] Font Awesome icon all'interno di una dropdown

robertino_salemi
08-07-2019, 12: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!

<!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, 13: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, 16: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/Responsive-Select-Dropdown-with-Images
robertino_salemi
09-07-2019, 08:11
Posso anche utilizzare bootstrap, non è un problema.

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


<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:

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, 11: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, 13: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, 13: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, 14:50
Comprendo, però in questo modo ottiene ciò che gli serve?
airon
09-07-2019, 14:58
Comprendo, però in questo modo ottiene ciò che gli serve?

Si si ;)
robertino_salemi
10-07-2019, 08:27
Grazie ragazzi, perfetto, vediamo se la soluzione con option tutta colorata va bene, altrimenti utilizzerò una libreria esterna. :D
robertino_salemi
12-07-2019, 09: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, 10:15
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, 10:57
Va bene, proverò con questa libreria!
Grazie.