menu con favicon e label sotto icone

**Kahm** · 15-03-2021, 11:20

salve a tutti
il mio target dovrebbe essere questo:

attualmente sono fermo al disastro
ho 2 prove ai quali sto tentando

codice:

	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
	


	<div class="btn-group  btn-group-lg" role="group" aria-label="Basic example">
		 <%-- <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>--%>
		  <button type="button" class="btn btn-secondary"><span class="fas fa-home"></span></button> 
		   <button type="button" class="btn btn-secondary"><i class="fa fa-book-open"></i></button>
			<button type="button" class="btn btn-secondary"><i class="fa fa-shopping-cart"></i></button>
		  <button type="button" class="btn btn-secondary"><i class="far fa-address-card"></i></button>
	  </div>

codice:

	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
	
 <div class="btn-group-lg form-group"  >
	   <button type="button" id="btn"  class="btn btn-secondary form-control"><span class="fas fa-home"></span></button> 
	     <label for="btn">label</label>
	
	  	   <button type="button" id="btn2"  class="btn btn-secondary form-control"><span class="fas fa-home"></span></button> 
	     <label for="bt2n">label</label>
  </div>

**KillerWorm** · 20-03-2021, 00:28

Ciao, non so se nel frattempo hai già risolto, comunque posto un esempio di come lo imposterei io:

codice HTML:

<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

      <style>
         .navbar{
            display: flex;
            padding: 0em;
            font-size: 1em;
         }
         .navbar button{
            font-size: inherit;
            padding: .5em 1em;
            display: flex;
            flex-direction: column;
            border: 0;
            cursor: pointer;
         }
         .navbar button i{
            height: 1em;
            margin: 0 0 .5em;
         }

         
         /* -------- COLORI -------- */
         
         .navbar                    { background: #940000; }
         .navbar button             { background: transparent; color: #fffa; }
         .navbar button:hover,
         .navbar button.active,
         .navbar button:focus       { color: #fff; }
         
         /* ------------------------ */
         
      </style>
   </head>
   <body>
      <div class="btn-group  btn-group-lg navbar" role="group" aria-label="Basic example">
         <button type="button" class="btn btn-secondary active"><i class="fas fa-home"></i>Home</button> 
           <button type="button" class="btn btn-secondary"><i class="fa fa-book-open"></i>Menù</button>
         <button type="button" class="btn btn-secondary"><i class="fa fa-shopping-cart"></i>Carrello</button>
         <button type="button" class="btn btn-secondary"><i class="far fa-address-card"></i>Io</button>
      </div>
   </body>
</html>

Tieni conto che è fatto in 10 minuti per darti giusto uno spunto; è chiaro poi che si possa fare in mille modi diversi.
Se hai domande chiedi pure.
Fai sapere, buon proseguimento

Discussione: menu con favicon e label sotto icone

Strumenti discussione

Ricerca discussione

Visualizza

menu con favicon e label sotto icone

Permessi di invio