|
|
|
|
Strumenti |
08-07-2019, 12:53 | #1 |
Senior Member
Iscritto dal: Apr 2009
Città: Aci Catena (CT)
Messaggi: 1016
|
[HTML] 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! 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> Grazie. |
08-07-2019, 13:02 | #2 |
Senior Member
Iscritto dal: Apr 2005
Messaggi: 2993
|
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, 16:11 | #3 |
Senior Member
Iscritto dal: Mar 2003
Città: Perugia
Messaggi: 16280
|
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, 08:11 | #4 |
Senior Member
Iscritto dal: Apr 2009
Città: Aci Catena (CT)
Messaggi: 1016
|
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> Codice:
var dropdown = $('#addNewEventType'); $.each(result, function () { dropdown.append( /*$("<option></option>").html("<span style=\"color:" + this.Colore + "\"></span> " + this.Descrizione ).val(this.Codice)*/ $("<option></option>").html(" " + this.Descrizione).val(this.Codice) ); }); Grazie. |
09-07-2019, 11:52 | #5 |
Senior Member
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2141
|
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 12:02. Motivo: Link sbagliato e altre cose |
09-07-2019, 13:04 | #6 |
Senior Member
Iscritto dal: Apr 2005
Messaggi: 2993
|
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, 13:19 | #7 |
Senior Member
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2141
|
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 13:29. |
09-07-2019, 14:50 | #8 |
Senior Member
Iscritto dal: Apr 2005
Messaggi: 2993
|
Comprendo, però in questo modo ottiene ciò che gli serve?
|
09-07-2019, 14:58 | #9 |
Senior Member
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2141
|
|
10-07-2019, 08:27 | #10 |
Senior Member
Iscritto dal: Apr 2009
Città: Aci Catena (CT)
Messaggi: 1016
|
Grazie ragazzi, perfetto, vediamo se la soluzione con option tutta colorata va bene, altrimenti utilizzerò una libreria esterna.
|
12-07-2019, 09:41 | #11 |
Senior Member
Iscritto dal: Apr 2009
Città: Aci Catena (CT)
Messaggi: 1016
|
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, 10:15 | #12 | |
Senior Member
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2141
|
Quote:
Visto che usi bootstrap usa bootstrap-select e ci fai quello che vuoi. |
|
12-07-2019, 10:57 | #13 |
Senior Member
Iscritto dal: Apr 2009
Città: Aci Catena (CT)
Messaggi: 1016
|
Va bene, proverò con questa libreria!
Grazie. |
Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 02:51.