Highlighted

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

Explorer ,
Nov 09, 2020

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.

Views

20

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Nov 09, 2020

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.

Views

21

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 09, 2020 0
Adobe Community Professional ,
Nov 09, 2020

Copy link to clipboard

Copied

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

 

MobileMobile

DesktopDesktop

 

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2020 1
Explorer ,
Nov 09, 2020

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.  

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2020 0
Adobe Community Professional ,
Nov 09, 2020

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.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2020 0
NHG Web LATEST
Explorer ,
Nov 09, 2020

Copy link to clipboard

Copied

Ok. Thank you.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 09, 2020 0