+ Rispondi alla Discussione
Risultati da 1 a 8 di 8

Font Awesome icon all'interno di una dropdown

Ultimo Messaggio di felino il:
  1. #1
    Utente Premium L'avatar di felino
    Data Registrazione
    Nov 2009
    Località
    Acicatena - Catania
    Messaggi
    1,816
    Aggiungi felino su Facebook Aggiungi felino su Linkedin

    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.

  2. #2
    Moderatore L'avatar di Ultima
    Data Registrazione
    Jan 2013
    Località
    Senigallia
    Messaggi
    772
    Aggiungi Ultima su Facebook
    Ciao felino, ti ho modificato e salvato la demo su jsfiddle usando la modalità collabirativa.
    Comunque ti è sufficiente usare questa logica:
    Codice:
    <select class="fa">
    <option>&#xf0c8 TEST</option>
    <option>&#xf0c8 TEST2</option>
    <option>&#xf0c8 TEST3</option>
    <option>&#xf0c8 TEST4</option>
    <option>&#xf0c8 TEST5</option>
    <option>&#xf0c8 TEST6</option>
    </select>
    MODWordpress
    Senior Web Developer to http://www.canenero.com - https://www.stefanopascazi.com
    Magento Specialist - WP Addicted (e Netflix dipendente XD )

  3. #3
    Utente Premium L'avatar di felino
    Data Registrazione
    Nov 2009
    Località
    Acicatena - Catania
    Messaggi
    1,816
    Aggiungi felino su Facebook Aggiungi felino su Linkedin
    Ciao Ultima come va? Grazie!!!

    Ma se volessi modificare il colore dinamicamente, pensi sia possibile?

  4. #4
    Moderatore L'avatar di Ultima
    Data Registrazione
    Jan 2013
    Località
    Senigallia
    Messaggi
    772
    Aggiungi Ultima su Facebook
    Certo che puoi cambiare colore. Ma Aimè, lo dai a tutto il contenuto del "option".
    Qui un esempio: https://jsfiddle.net/stefanopascazi/h3b5spgw/1/
    MODWordpress
    Senior Web Developer to http://www.canenero.com - https://www.stefanopascazi.com
    Magento Specialist - WP Addicted (e Netflix dipendente XD )

  5. #5
    Utente Premium L'avatar di felino
    Data Registrazione
    Nov 2009
    Località
    Acicatena - Catania
    Messaggi
    1,816
    Aggiungi felino su Facebook Aggiungi felino su Linkedin
    Grazie, va benissimo al momento come soluzione!

  6. #6
    Utente Premium L'avatar di felino
    Data Registrazione
    Nov 2009
    Località
    Acicatena - Catania
    Messaggi
    1,816
    Aggiungi felino su Facebook Aggiungi felino su Linkedin
    @ultima, cambio di idea... vorrei colorare solo il quadratino prima del testo....

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

    Avevo trovato una guida che utlizza un elenco puntato al posto della select, ma non sono più riuscito a reperirla.

    Sto utilizzando Bootstrap e Font Awesome, qualche suggerimento?

  7. #7
    Moderatore L'avatar di Ultima
    Data Registrazione
    Jan 2013
    Località
    Senigallia
    Messaggi
    772
    Aggiungi Ultima su Facebook
    Ciao felino, ti spiego.
    La sfortuna di quello che chiedi è che all'interno del marker "option" non sono ammessi codici html secondo lo standard del w3c, quindi anche ammesso che con un sistemino in javascript funzioni, rischi di creare problemi di compatibilità cross browser.
    La sola soluzione che mi viene in mente è quella di utilizzare un plugin per jQuery. A quel punto, siccome la maggior parte crea delle select tramite delle liste (ul), puoi lavorarle come ti pare. Un buon plugin che ti permette di lavorarci discretamente è selectric https://selectric.js.org/, ma se proprio devo essere sincero, a meno che, non sia una vera specifica richiesta da un dato cliente, eviterei di appesantire il sito con un ennesimo js aggiuntivo. Però il plugin che ti ho indicato, fa esattamente quello che chiedi in termini di visualizzazione.
    Fammi sapere.
    MODWordpress
    Senior Web Developer to http://www.canenero.com - https://www.stefanopascazi.com
    Magento Specialist - WP Addicted (e Netflix dipendente XD )

  8. #8
    Utente Premium L'avatar di felino
    Data Registrazione
    Nov 2009
    Località
    Acicatena - Catania
    Messaggi
    1,816
    Aggiungi felino su Facebook Aggiungi felino su Linkedin
    Grazie sempre per i tuoi consigli.
    Darò un'occhiata al plugin e vedrò di capire se è strettamente necessaria questa feature.

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.