A project created by Stephanie Nadeau on LiveCodes.
Created
August 24, 2022 06:08
-
-
Save LaunchedBerry07/63a20b929cbdacb48bb6d72c40be36fc to your computer and use it in GitHub Desktop.
icon-bar-horizontal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Add icon library --> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
<div class="icon-bar"> | |
<a class="active" href="#"><i class="fa fa-home"></i></a> | |
<a href="#"><i class="fa fa-search"></i></a> | |
<a href="#"><i class="fa fa-envelope"></i></a> | |
<a href="#"><i class="fa fa-globe"></i></a> | |
<a href="#"><i class="fa fa-trash"></i></a> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.icon-bar { | |
width: 100%; /* Full-width */ | |
background-color: #555; /* Dark-grey background */ | |
overflow: auto; /* Overflow due to float */ | |
} | |
.icon-bar a { | |
float: left; /* Float links side by side */ | |
text-align: center; /* Center-align text */ | |
width: 20%; /* Equal width (5 icons with 20% width each = 100%) */ | |
padding: 12px 0; /* Some top and bottom padding */ | |
transition: all 0.3s ease; /* Add transition for hover effects */ | |
color: white; /* White text color */ | |
font-size: 36px; /* Increased font size */ | |
} | |
.icon-bar a:hover { | |
background-color: #000; /* Add a hover color */ | |
} | |
.active { | |
background-color: #04AA6D; /* Add an active/current color */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment