Hardware Upgrade Forum

Hardware Upgrade Forum (https://www.hwupgrade.it/forum/index.php)
-   Programmazione (https://www.hwupgrade.it/forum/forumdisplay.php?f=38)
-   -   [HTML] Font Awesome icon all'interno di una dropdown (https://www.hwupgrade.it/forum/showthread.php?t=2887941)


robertino_salemi 08-07-2019 13:53

[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.

Kaya 08-07-2019 14: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 17: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/Responsi...wn-with-Images

robertino_salemi 09-07-2019 09:11

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.

airon 09-07-2019 12: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 14: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 14: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 15:50

Comprendo, però in questo modo ottiene ciò che gli serve?

airon 09-07-2019 15:58

Quote:

Originariamente inviato da Kaya (Messaggio 46301217)
Comprendo, però in questo modo ottiene ciò che gli serve?

Si si ;)

robertino_salemi 10-07-2019 09: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 10: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 11:15

Quote:

Originariamente inviato da robertino_salemi (Messaggio 46305436)
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 11:57

Va bene, proverò con questa libreria!
Grazie.


Tutti gli orari sono GMT +1. Ora sono le: 21:49.

Powered by vBulletin® Version 3.6.4
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
Hardware Upgrade S.r.l.