Fondazione - Icone
Descrizione
Le voci di menu possono contenere anche icone. Le icone possono essere incluse aggiungendo l'elemento <i>. L'icona può anche essere spostata sopra il menu di testo includendo l' icona della classe in alto nel menu.
Esempio
L'esempio seguente mostra l'uso delle icone nel menu in Foundation -
<!DOCTYPE html>
<html>
<head>
<title>Foundation Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
</head>
<body>
<h2>Example of Icons</h2>
<ul class = "menu">
<li><a href = "#"><i class = "fi-home"></i>Home</a></li>
<li><a href = "#"><i class = "fi-book"></i>About</a></li>
<li><a href = "#"><i class = "fi-pencil"></i>Service</a></li>
<li><a href = "#"><i class = "fi-wrench"></i>Contact</a></li>
</ul>
</body>
</html>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice html sopra indicato icons.html file.
Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.
Esempio
L'esempio seguente mostra l'uso delle icone in alto nel menu in Foundation -
<!DOCTYPE html>
<html>
<head>
<title>Foundation Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
</head>
<body>
<h2>Example of Icons</h2>
<ul class = "menu icon-top">
<li><a href = "#"><i class = "fi-home"></i>Home</a></li>
<li><a href = "#"><i class = "fi-book"></i>About</a></li>
<li><a href = "#"><i class = "fi-pencil"></i>Service</a></li>
<li><a href = "#"><i class = "fi-wrench"></i>Contact</a></li>
</ul>
</body>
</html>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice html sopra indicato icon_top.html file.
Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.