Icons above bootstrap navbar - html

Question

I want to put some icons (facebook, instagram, youtube, whatsapp) above of navbar elements, like this:
This is my code:
<nav class="navbar fixed-top navbar-expand-lg navbar-light navbar-custom">
<a class="navbar-brand" href="http://localhost/wp/">
<img src="http://localhost/wp/wp-content/uploads/2019/05/cropped-logo-1.png"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"></ul>
<ul id="menu-menu-principal" class="navbar-nav">
<li id="menu-item-10" class="nav-item active"><a title="INICIO" class=" nav-link" href="#">INICIO</a></li>
<li id="menu-item-12" class="nav-item"><a title="NOSOTROS" class=" nav-link" href="#">NOSOTROS</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19 nav-item"><a title="BLOG" class=" nav-link" href="#">BLOG</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20 nav-item"><a title="CONTACTO" class=" nav-link" href="#">CONTACTO</a></li>
</ul>
</div>
</nav>
Anybody can help me?

Answer 1

Here's how you do it, Since you want to make your icon-bar above navbar as fixed, we will have to remove the fixed-top class from the navbar, because then giving position:fixed to icon-bar would overlap with our navbar.
So wrap both navbar and icon-bar inside a wrapper div and make that div as position: fixed instead. Rest of the things are self-explanatory if you know basic css.
Here is a code snippet or a fiddle in case you can't figure it out,
#top-wrapper {
position: fixed;
top: 0; left: 0; right: 0;
background-color: green;
z-index: 999;
}
#top-wrapper .icon-bar {
width: 100%;
overflow: auto;
}
#top-wrapper .icon-bar ul {
float: right;
list-style: none;
margin: 0;
padding: 16px 16px 16px 0;
}
#top-wrapper .icon-bar ul li {
float: left;
padding: 0 16px;
border-right: 1px dotted #fff;
}
#top-wrapper .icon-bar ul li:last-child {
border: none;
}
#top-wrapper ul li i {
color: #FFF;
font-size: 14px;
}
.section {
height: 100vh;
background-color: grey;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- font awesome cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="top-wrapper"> <!-- this is our wrapper div -->
<div class="icon-bar">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
<li><i class="fa fa-whatsapp"></i></li>
</ul>
</div>
<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
<a class="navbar-brand" href="http://localhost/wp/">
<img src="http://localhost/wp/wp-content/uploads/2019/05/cropped-logo-1.png"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"></ul>
<ul id="menu-menu-principal" class="navbar-nav">
<li id="menu-item-10" class="nav-item active"><a title="INICIO" class=" nav-link" href="#">INICIO</a>
</li>
<li id="menu-item-12" class="nav-item"><a title="NOSOTROS" class=" nav-link" href="#">NOSOTROS</a>
</li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19 nav-item"><a title="BLOG" class=" nav-link" href="#">BLOG</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20 nav-item"><a title="CONTACTO" class=" nav-link" href="#">CONTACTO</a></li>
</ul>
</div>
</nav>
</div>
<div class="section">Hello world</div>
<div class="section">Hello world</div>
<div class="section">Hello world</div>

Answer 2

At first you need to load Font Awesome then use it.
Look at this links to understand how it works. It is simple.
Introduction Font Awesome
Brand icons
Instagram Example
Try this code.
Be sure that you loaded Font Awesome correctly.
<nav class="navbar fixed-top navbar-expand-lg navbar-light navbar-custom">
<div class="social">
<i class='fab fa-instagram' style='font-size:24px'></i>
<i class='fab fa-facebook' style='font-size:24px'></i>
<i class='fab fa-twitter' style='font-size:24px'></i>
<i class='fab fa-linkedin' style='font-size:24px'></i>
<i class='fab fa-pinterest' style='font-size:24px'></i>
</div>
<div class="menu">
<a class="navbar-brand" href="http://localhost/wp/">
<img src="http://localhost/wp/wp-content/uploads/2019/05/cropped-logo-1.png"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"></ul>
<ul id="menu-menu-principal" class="navbar-nav">
<li id="menu-item-10" class="nav-item active"><a title="INICIO" class=" nav-link" href="#">INICIO</a></li>
<li id="menu-item-12" class="nav-item"><a title="NOSOTROS" class=" nav-link" href="#">NOSOTROS</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19 nav-item"><a title="BLOG" class=" nav-link" href="#">BLOG</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20 nav-item"><a title="CONTACTO" class=" nav-link" href="#">CONTACTO</a></li>
</ul>
</div>
</div>
</nav>

Answer 3

Here's your answer. I can tell you're using WordPress from your code.
1) Install the Better Font Awesome plugin and activate it - https://wordpress.org/plugins/better-font-awesome/
2) Add the following code:
Note: aria-labels in the code below is used by screen readers like VoiceOver on a Mac (see https://www.youtube.com/watch?v=5R-6WvAihms for a demo) so it's good to include this code. A screen reader (software on a computer, cell phone, or tablet) will say something like "Facebook link" and "WhatsApp link" and then people with disabilties (i.e. blind people) can know it's a link to click on.
<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
<i class="fab fa-facebook-square"></i>
</a>
<a href="https://www.whatsapp.com/" target="_blank" aria-label="WhatsApp">
<i class="fab fa-whatsapp"></i>
</a>
etc.
3) Do searches for more Font Awesome icon code at https://fontawesome.com/icons?d=gallery