Copy link to clipboard
Copied
Hello. I have inserted a bootstrap 4 navbar using the latest Dreamweaver version.
I am just starting out with bootstrap. I would like to know how to insert social media icons into the navbar and position them to the right on larger screens and to the left of the hamburger menu on smaller screens.
Can anyone point me in the right direction remembering that I am rather new to bootstrap?
Thanks.
Copy link to clipboard
Copied
Social media icons are typically SVG images or font glyphs. I'm using Font Awesome 4 for this example.
Copy & paste the code below into a new, blank document.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Navbar with Brand/Logo, Font Awesome Icons </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest Bootstrap on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!--Font Awesome Icons-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" >
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<!--Hamburger icon-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mynavbar" aria-controls="mynavbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<!--BRAND/LOGO here-->
<a class="navbar-brand" href="#"><img src="https://dummyimage.com/300x65" alt="logo"></a>
<div class="collapse navbar-collapse justify-content-md-center" id="mynavbar">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu1</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu2</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu3</a> </li>
<!--Begin Font Awesome Icons-->
<li><a href="#"><i class="fa fa-3x fa-twitter-square" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-3x fa-facebook-square" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-3x fa-youtube-square" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-3x fa-vimeo-square" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</nav>
<!--BEGIN PAGE CONTENT-->
<div class="container">
<div class="row">
<div class="col">
Page content goes here...
</div>
</div>
</div>
<!--First jQuery then popper then Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Font Awesome Cheat Sheet
https://fontawesome.com/v4.7.0/icons/
Copy link to clipboard
Copied
Thank you Nancy.
I have already built the navbar. Is there anyway to insert the social media icons into the navbar I already built.
I don't mean to be so dim but I'm just starting out.
Copy link to clipboard
Copied
Copy & paste my code into a new blank document and save it just in case.
You will need the Font Awesome CSS and the Navbar code I gave you.
Copy link to clipboard
Copied
Ok. Thank you.