Torna indietro   Hardware Upgrade Forum > Software > Programmazione

TCL 65C7K, televisore Mini-LED di qualità, versatile e dal prezzo competitivo
TCL 65C7K, televisore Mini-LED di qualità, versatile e dal prezzo competitivo
Tecnologia Mini LED, pannello 4K QLED HVA a 144Hz e audio Bang & Olufsen: il nuovo TCL 65C7K si candida come best buy per l’intrattenimento domestico a tutto tondo, con promozioni che ne esaltano il rapporto qualità/prezzo
Fujifilm X-E5: la Fuji X che tutti gli appassionati volevano
Fujifilm X-E5: la Fuji X che tutti gli appassionati volevano
Dopo il fascino un po’ elitario della GFX100RF e le polemiche intorno a x Half, la nuova Fujifilm X-E5 riporta tutti d’accordo: una mirrorless compatta, leggera, elegante, e finalmente con stabilizzazione IBIS a bordo anche sulla serie E. Con il sensore da 40 MP e il processore X-Processor 5, eredita prestazioni da sorelle più costose, ma con l'ergonomia del mirino laterale in stile telemetro e una nuova ghiera per le simulazioni pellicola. Il tutto a un prezzo che, seppur più alto della precedente X-E4, la pne in kit al parti di X100VI
Recensione REDMAGIC 10S Pro: il gaming phone definitivo?
Recensione REDMAGIC 10S Pro: il gaming phone definitivo?
Il REDMAGIC 10S Pro è uno smartphone da gaming estremo che unisce il nuovo Snapdragon 8 Elite Leading Version, display AMOLED 144Hz da 6,85", raffreddamento ICE-X a metallo liquido e batteria da 7.050 mAh per prestazioni e autonomia al top.
Tutti gli articoli Tutte le news

Vai al Forum
Rispondi
 
Strumenti
Old 08-07-2019, 12:53   #1
robertino_salemi
Senior Member
 
L'Avatar di robertino_salemi
 
Iscritto dal: Apr 2009
Città: Aci Catena (CT)
Messaggi: 1021
[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>
Qui il https://jsfiddle.net/robertinosalemi/sb60ztwp/ per la demo..


Grazie.
robertino_salemi è offline   Rispondi citando il messaggio o parte di esso
Old 08-07-2019, 13:02   #2
Kaya
Senior Member
 
Iscritto dal: Apr 2005
Messaggi: 3220
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...
Kaya è offline   Rispondi citando il messaggio o parte di esso
Old 08-07-2019, 16:11   #3
]Rik`[
Senior Member
 
L'Avatar di ]Rik`[
 
Iscritto dal: Mar 2003
Città: Perugia
Messaggi: 16289
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
]Rik`[ è offline   Rispondi citando il messaggio o parte di esso
Old 09-07-2019, 08:11   #4
robertino_salemi
Senior Member
 
L'Avatar di robertino_salemi
 
Iscritto dal: Apr 2009
Città: Aci Catena (CT)
Messaggi: 1021
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.
robertino_salemi è offline   Rispondi citando il messaggio o parte di esso
Old 09-07-2019, 11:52   #5
airon
Senior Member
 
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2144
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
airon è offline   Rispondi citando il messaggio o parte di esso
Old 09-07-2019, 13:04   #6
Kaya
Senior Member
 
Iscritto dal: Apr 2005
Messaggi: 3220
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?
Kaya è offline   Rispondi citando il messaggio o parte di esso
Old 09-07-2019, 13:19   #7
airon
Senior Member
 
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2144
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.
airon è offline   Rispondi citando il messaggio o parte di esso
Old 09-07-2019, 14:50   #8
Kaya
Senior Member
 
Iscritto dal: Apr 2005
Messaggi: 3220
Comprendo, però in questo modo ottiene ciò che gli serve?
Kaya è offline   Rispondi citando il messaggio o parte di esso
Old 09-07-2019, 14:58   #9
airon
Senior Member
 
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2144
Quote:
Originariamente inviato da Kaya Guarda i messaggi
Comprendo, però in questo modo ottiene ciò che gli serve?
Si si
airon è offline   Rispondi citando il messaggio o parte di esso
Old 10-07-2019, 08:27   #10
robertino_salemi
Senior Member
 
L'Avatar di robertino_salemi
 
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.
robertino_salemi è offline   Rispondi citando il messaggio o parte di esso
Old 12-07-2019, 09:41   #11
robertino_salemi
Senior Member
 
L'Avatar di robertino_salemi
 
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.
robertino_salemi è offline   Rispondi citando il messaggio o parte di esso
Old 12-07-2019, 10:15   #12
airon
Senior Member
 
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2144
Quote:
Originariamente inviato da robertino_salemi Guarda i messaggi
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.
airon è offline   Rispondi citando il messaggio o parte di esso
Old 12-07-2019, 10:57   #13
robertino_salemi
Senior Member
 
L'Avatar di robertino_salemi
 
Iscritto dal: Apr 2009
Città: Aci Catena (CT)
Messaggi: 1021
Va bene, proverò con questa libreria!
Grazie.
robertino_salemi è offline   Rispondi citando il messaggio o parte di esso
 Rispondi


TCL 65C7K, televisore Mini-LED di qualità, versatile e dal prezzo competitivo TCL 65C7K, televisore Mini-LED di qualità...
Fujifilm X-E5: la Fuji X che tutti gli appassionati volevano Fujifilm X-E5: la Fuji X che tutti gli appassion...
Recensione REDMAGIC 10S Pro: il gaming phone definitivo? Recensione REDMAGIC 10S Pro: il gaming phone def...
HPE Discover 2025: tra agenti intelligenti, infrastruttura AI-native e un futuro ibrido HPE Discover 2025: tra agenti intelligenti, infr...
Radeon RX 9060 XT, assalto a NVIDIA? Ecco come va la nuova scheda video di AMD Radeon RX 9060 XT, assalto a NVIDIA? Ecco come v...
Addio zanzare: PhotonMatrix le abbatte u...
Ha fondato un colosso dei microchip in g...
Smartphone economici in offerta: 7 model...
Xbox Game Pass sotto accusa: il fondator...
iPhone scontatissimi (il 16 a 719€), por...
Non scende quasi mai: oggi, in tutti i c...
Coupon nascosti Amazon luglio 2025: deci...
Motorola Edge 60 e Edge 50 Neo in offert...
TSMC rallenta in Giappone e accelera neg...
Tutte le AirPods in sconto, Pro 2 e seri...
Addio ai nastri magnetici? Cerabyte prom...
Sony abbassa i prezzi di 2 cuffie eccezi...
Commodore 64: quali erano i 10 giochi pi...
Elon Musk ha annunciato un nuovo partito...
Fairphone 6 conquista iFixit: riparabili...
Chromium
GPU-Z
OCCT
LibreOffice Portable
Opera One Portable
Opera One 106
CCleaner Portable
CCleaner Standard
Cpu-Z
Driver NVIDIA GeForce 546.65 WHQL
SmartFTP
Trillian
Google Chrome Portable
Google Chrome 120
VirtualBox
Tutti gli articoli Tutte le news Tutti i download

Strumenti

Regole
Non Puoi aprire nuove discussioni
Non Puoi rispondere ai messaggi
Non Puoi allegare file
Non Puoi modificare i tuoi messaggi

Il codice vB è On
Le Faccine sono On
Il codice [IMG] è On
Il codice HTML è Off
Vai al Forum


Tutti gli orari sono GMT +1. Ora sono le: 05:53.


Powered by vBulletin® Version 3.6.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Served by www2v