I am a bit of a novice at coding, but I am creating an icon bar what sit in a standalone section on a page, problem is the backgroun colour of my icon bar is overtaking over parts of the page.
Is there away of stopping this happening?
Code below
<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">
<style>
body {margin:0;}
icon var
in CSS
Posted
Hi,
I am a bit of a novice at coding, but I am creating an icon bar what sit in a standalone section on a page, problem is the backgroun colour of my icon bar is overtaking over parts of the page.
Is there away of stopping this happening?
Code below
<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">
<style>
body {margin:0;}
.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;
}
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #96B422;
}
.active {
background-color: #C45791;
}
</style>
<body>
<div class="icon-bar">
<a class="active" href="https://funeral-notices.co.uk/national" target="_blank"><i class="fa fa-home"></i></a>
<a href="https://funeral-notices.co.uk/national/all-announcements" target="_blank"><i class="fa fa-search"></i></a>
<a href="https://funeral-notices.co.uk/register" target="_blank"><i class="fa fa-user-plus"></i></a>
<a href="https://www.fngifts.co.uk" target="_blank"><i class="fa fa-shopping-bag"></i></a>
<a href="https://www.facebook.com/funeralnoticesonline/" target="_blank"><i class="fa fa-facebook"></i></a>
</div>
</body>
</html>