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

Report · Nov 09, 2020

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.

Report · Nov 09, 2020

Social media icons are typically SVG images or font glyphs. I'm using Font Awesome 4 for this example.

Mobile

Desktop

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 09, 2020

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.

Report · Nov 09, 2020

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.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 09, 2020

Ok. Thank you.

Adobe Community

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