Torna indietro   Hardware Upgrade Forum > Software > Programmazione

EICMA 2019, una rassegna delle due ruote elettriche più interessanti di quest'anno
EICMA 2019, una rassegna delle due ruote elettriche più interessanti di quest'anno
Un'edizione che ricalca grosso modo quanto visto la passata edizione offrendo comunque interessanti aggiornamenti nel settore della trazione elettrica che delineano l'andamento di questo settore
AMD Athlon 3000G: dual core economico ora anche per l'overclock
AMD Athlon 3000G: dual core economico ora anche per l'overclock
Costo contenuto, solo 49 dollari nel listino ufficiale, per un processore basato su architettura Zen che integra 2 core, è capace di elaborare sino a 4 threads ed è dotato di GPU Vega. Non solo: è pure overcloccabile in quanto sbloccato. Tutto bello per essere vero? No, ma a patto di qualche compromesso quanto a prestazioni assolute
Google Stadia provato: ecco com'è al lancio
Google Stadia provato: ecco com'è al lancio
Google Stadia sarà disponibile dalla giornata di domani, consentendo di giocare alcuni titoli di ultima generazione alla risoluzione 4K, a 60 frame per secondo e in HDR pur senza disporre dell'hardware necessario ad elaborare le immagini in locale
Tutti gli articoli Tutte le news

Vai al Forum
Rispondi
 
Strumenti
Old 08-07-2019, 13:53   #1
robertino_salemi
Senior Member
 
L'Avatar di robertino_salemi
 
Iscritto dal: Apr 2009
Città: Aci Catena (CT)
Messaggi: 892
[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 è online   Rispondi citando il messaggio o parte di esso
Old 08-07-2019, 14:02   #2
Kaya
Senior Member
 
Iscritto dal: Apr 2005
Messaggi: 1329
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, 17:11   #3
]Rik`[
Senior Member
 
L'Avatar di ]Rik`[
 
Iscritto dal: Mar 2003
Città: Perugia
Messaggi: 16254
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, 09:11   #4
robertino_salemi
Senior Member
 
L'Avatar di robertino_salemi
 
Iscritto dal: Apr 2009
Città: Aci Catena (CT)
Messaggi: 892
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 è online   Rispondi citando il messaggio o parte di esso
Old 09-07-2019, 12:52   #5
airon
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 13:02. Motivo: Link sbagliato e altre cose
airon è offline   Rispondi citando il messaggio o parte di esso
Old 09-07-2019, 14:04   #6
Kaya
Senior Member
 
Iscritto dal: Apr 2005
Messaggi: 1329
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, 14:19   #7
airon
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 14:29.
airon è offline   Rispondi citando il messaggio o parte di esso
Old 09-07-2019, 15:50   #8
Kaya
Senior Member
 
Iscritto dal: Apr 2005
Messaggi: 1329
Comprendo, però in questo modo ottiene ciò che gli serve?
Kaya è offline   Rispondi citando il messaggio o parte di esso
Old 09-07-2019, 15:58   #9
airon
Senior Member
 
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2141
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, 09:27   #10
robertino_salemi
Senior Member
 
L'Avatar di robertino_salemi
 
Iscritto dal: Apr 2009
Città: Aci Catena (CT)
Messaggi: 892
Grazie ragazzi, perfetto, vediamo se la soluzione con option tutta colorata va bene, altrimenti utilizzerò una libreria esterna.
robertino_salemi è online   Rispondi citando il messaggio o parte di esso
Old 12-07-2019, 10:41   #11
robertino_salemi
Senior Member
 
L'Avatar di robertino_salemi
 
Iscritto dal: Apr 2009
Città: Aci Catena (CT)
Messaggi: 892
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 è online   Rispondi citando il messaggio o parte di esso
Old 12-07-2019, 11:15   #12
airon
Senior Member
 
Iscritto dal: Feb 2004
Città: milano
Messaggi: 2141
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, 11:57   #13
robertino_salemi
Senior Member
 
L'Avatar di robertino_salemi
 
Iscritto dal: Apr 2009
Città: Aci Catena (CT)
Messaggi: 892
Va bene, proverò con questa libreria!
Grazie.
robertino_salemi è online   Rispondi citando il messaggio o parte di esso
 Rispondi


EICMA 2019, una rassegna delle due ruote elettriche più interessanti di quest'anno EICMA 2019, una rassegna delle due ruote elettri...
AMD Athlon 3000G: dual core economico ora anche per l'overclock AMD Athlon 3000G: dual core economico ora anche ...
Google Stadia provato: ecco com'è al lancio Google Stadia provato: ecco com'è al lanc...
5GAA: per le strade di Torino auto con sistemi ADAS più intelligenti grazie al 5G 5GAA: per le strade di Torino auto con sistemi A...
GFX 100, Fujifilm raggiunge quota 100 (Mpixel). La recensione GFX 100, Fujifilm raggiunge quota 100 (Mpixel). ...
Apple lancia le custodie con batteria pe...
''WhatsApp non riesce a proteggere i mes...
Sky pronta a diventare un operatore tele...
Boom di smartphone 5G nei prossimi 3 ann...
Un accordo commerciale sempre in bilico ...
Intel si scusa ufficialmente per i probl...
Ecco le offerte Amazon di oggi 21 novemb...
Il nuovo MacBook Pro da 16 pollici nasco...
Contrail Insight, il nuovo strumento di ...
Monclick: cosa acquistare in vista del B...
Lenovo apre a Milano il suo primo flagsh...
Una fonte di energia potenzialmente infi...
WhatsApp sparirà da questi smartp...
Amazon Black Friday 2019: inizia la fest...
In arrivo una scheda GeForce RTX 2080Ti ...
Opera 65
Chromium
Driver NVIDIA GeForce 441.34 hotfix
FurMark
Advanced SystemCare
IObit Malware Fighter
AIDA64 Extreme Edition
Backup4all
IObit Uninstaller
Radeon Software Adrenaline Edition 19.
ZoneAlarm Antivirus + Firewall
WinRAR
GPU-Z
K-Lite Codec Pack Update
K-Lite Mega Codec Pack
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: 14:01.


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