[HTML] Font Awesome icon all'interno di una dropdown

Discussione in 'HTML e CSS' iniziata da felino, 8 Luglio 2019.

  1. felino

    felino Utente Attivo

    Registrato:
    12 Dicembre 2013
    Messaggi:
    853
    Mi Piace Ricevuti:
    8
    Punteggio:
    18
    Occupazione:
    Developer Senior
    Località:
    Aci Catena (Catania)
    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. mr.x

    mr.x Utente Attivo

    Registrato:
    9 Aprile 2016
    Messaggi:
    200
    Mi Piace Ricevuti:
    22
    Punteggio:
    28
    per la dropdown puoi provare utilizzando bootstrap

    demo http://jsfiddle.net/5fk1076c/

    HTML:
    <!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">
     <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div style="margin:20px">           
        <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><i class="fa fa-square"></i> boh</a></li>
                            <li><a href="#"><i class="fa fa-square" style="font-size:24px;color:green"></i>  Green</a></li>
                            <li><a href="#"><i class="fa fa-square" style="font-size:36px;color:blue"></i>  Blu</a></li>
                            <li><a href="#"><i class="fa fa-square" style="font-size:48px;color:red"></i> Red</a></li>
                        </ul>
                    </li>
                </ul>
    </div>
    </body></html>
     
  3. felino

    felino Utente Attivo

    Registrato:
    12 Dicembre 2013
    Messaggi:
    853
    Mi Piace Ricevuti:
    8
    Punteggio:
    18
    Occupazione:
    Developer Senior
    Località:
    Aci Catena (Catania)
    Quindi utilizzare un elenco puntato al posto della classica select? :)
     
  4. felino

    felino Utente Attivo

    Registrato:
    12 Dicembre 2013
    Messaggi:
    853
    Mi Piace Ricevuti:
    8
    Punteggio:
    18
    Occupazione:
    Developer Senior
    Località:
    Aci Catena (Catania)
    Ho fatto qualche prova, ma forse tale soluzione è più adatta in un form, piuttosto che in una dropdown inserita in un form, principalmente perchè non viene visualizzato "l'option" scelta nella pseudo dropdown.
     
    Ultima modifica: 12 Luglio 2019
Sto caricando...

Condividi questa Pagina