Help needed with inserting social media icons into bootstrap 4 navbar - I'm using Dreamweaver

Forum|Forum|5 years ago
November 9, 2020
1 reply
352 views

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.

This topic has been closed for replies.

Nancy OShea

Community Expert

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> &nbsp;
<a href="#"><i class="fa fa-3x fa-facebook-square" aria-hidden="true"></i></a> &nbsp;
<a href="#"><i class="fa fa-3x fa-youtube-square" aria-hidden="true"></i></a> &nbsp;
<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/

Nancy O'Shea— Product User & Community Expert