<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Menu Icons</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<script src=
</script>
<script src=
</script>
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Menu Icons</strong>
<br>
<p>Icon Top</p>
<ul class="menu icons icon-top">
<li><a href="#"><i class="fi-list"></i>
<span>Data Structures</span>
</a>
</li>
<li><a href="#">
<i class="fi-list"></i>
<span>Algorithms</span>
</a>
</li>
<li><a href="#">
<i class="fi-list"></i>
<span>Interview Preparation</span>
</a>
</li>
</ul>
<p>Icon Bottom</p>
<ul class="menu icons icon-bottom">
<li><a href="#">Data Structures
<i class="fi-list"></i></a></li>
<li><a href="#">Algorithms
<i class="fi-list"></i></a></li>
<li><a href="#">Interview Preparation
<i class="fi-list"></i></a></li>
</ul>
<p>Icon Left</p>
<ul class="menu icons icon-left">
<li><a href="#">
<i class="fi-minus"></i>
<span>Data Structures</span></a>
</li>
<li><a href="#"><i class="fi-minus"> </i>
<span>Algorithms</span></a></li>
<li><a href="#"><i class="fi-minus"></i>
<span>Interview Preparation</span></a>
</li>
</ul>
<p>Icon Right</p>
<ul class="menu icons icon-right">
<li><a href="#"><span>Data Structures</span>
<i class="fi-minus"></i></a></li>
<li><a href="#"><span>Algorithms</span>
<i class="fi-minus"></i></a></li>
<li><a href="#"><span>Interview Preparation</span>
<i class="fi-minus"></i></a></li>
</ul>
<script>
$(document).foundation();
</script>
</body>
</html>