Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://use.fontawesome.com/0809c7e939.js"></script>
<style>
body {
background: #6f6f6f;
}
ul.mainmenu {
list-style-type: none;
margin: 0;
padding: 0;
background: #ccc;
border: solid 1px #000;
float: left;
}
ul.mainmenu li {
float: left;
}
ul.mainmenu li a {
display: block;
padding: 8px 12px;
border-right: solid 1px #000;
text-decoration: none;
font-family: fantasy;
color: #B71C1C;
}
ul.mainmenu li a:hover {
background: #B71C1C;
color: white;
}
ul.mainmenu li a i {
background: white;
color: #B71C1C;
padding: 4px;
border-radius: 100%;
margin-right: 4px;
}
ul.mainmenu li a:hover i {
background: #B71C1C;
color: white;
padding: 4px;
border-radius: 100%;
margin-right: 4px;
}
</style>
</head>
<body>
<ul class="mainmenu">
<li><a href=""><i class="fa fa-home"></i>Home</a></li>
<li><a href=""><i class="fa fa-envelope"></i>Contact</a></li>
<li><a href=""><i class="fa fa-pencil-square-o"></i>About</a></li>
</ul>
</body>
</html>
Output:
No comments:
Post a Comment