Im trying to use font awesome icon on my page beside the navbar brand. But for some reason its not loading. Need Help
<script src="https://use.fontawesome.com/e017101791.js"></script>
This is the script tag that font awesome mailed me and the one i'm using in my code
In the font awesome website the html for book-reader icon is
<i class="fas fa-book-reader"></i>
But in my code if i use 'fas' with 's' its not working so i had to write the class name as 'fa fa-book-reader'
In the footer I'm using facebook, twitter, instagram icon they are all loading perfectly after writing their class names as 'fa fa-facebook' instead of 'fab fa-facebook'.
.HTML
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<i class="fa fa-book-reader fa-3x mx-3"></i>
Books</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="mr-auto"></div>
<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="#">Course</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Price</a>
</li>
<li class="nav-item dropdown">
<div class="dropdown">
Pages
<div class="dropdown-content">
Generic
Element
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
My Webpage Pic
Expected Webpage Output
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
Use this cdn type and you will be good to go.
Include this in the head section of your page:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
Related
I can't seem to find a way to make my image appear in the navbar. Any tips on whether I should add a div tag or an extra class? What should I do in terms of CSS? I'm new to Bootstrap, thanks!
<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
<div class="container-fluid">
<a class="navbar-brand js-scroll" href="#page-top" >
<img src="img/Signature2.png" id="brand-image" class="img-fluid"/>
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault" aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#work">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#blog">Art</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I copied your code and replaced it with another image (since I cannot access yours) and it works. So the problem may be in the path you're providing.
Is the img folder in the same level as the html you linked? Are you sure you named the folder and image correctly?
When I host the following code on my computer and load it in Chrome the top left logo shows just fine. When I try and host it from my site Chrome reserves the correct container size but no image and Safari reserves a massive image size and no image. What am I missing here?
Here is my HTML:
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-custom p-1 mb-2">
<img id="head-img" src="Retirement-Solutions-4u-Final-logo.jpg" alt="Retirement-Solutions-4U-Final-logo">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="container">
<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="#">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a> <!--This needs to be something besides Blog-->
</li>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link head-phone mr-auto justify-content: right" href="#"><i class="fas fa-phone-alt"></i> 888-218-0324</a>
</li>
</ul>
</div>
</div>
</nav>
And here is my CSS:
#head-img{
width: 60vh;
height: 100%;
}
Link to page: http://base-campmarketing.com
The filename is incorrect. It's supposed to have a capital "U". The "alt" attribute on the logo had the correct file name in the HTML source. Once the logo shows up the issue should be fixed on Safari too.
Wrong name:
http://base-campmarketing.com/Retirement-Solutions-4u-Final-logo.jpg
Right name:
http://base-campmarketing.com/Retirement-Solutions-4U-Final-logo.jpg
I am using MDBootstrap(essentially Bootstrap 4) Navbar Collapse, however the toggle button won't collapse when clicking on an element. I've reached out to MDBootstrap themselves and can't seem to get an answer. I've been told to use Angular, but I'm using JQuery and I have read that you shouldn't mix those two together. Also, I don't know how I would incorporate Angular into my website. I've used Bootstrap before and never had to use Angular just to get the toggle button to close once clicked on. Does this sound familiar to anyone?
Lastly, when I click the toggle button, it opens upward rather than down- can anyone help with that as well, I would like it to open up downward.
My code is here:
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" style="height: 70px;">
<div class="container">
<!-- Brand -->
<a class="navbar-brand" href="index.php"><img src="img/andrea1.jpg" class="rounded-circle img-fluid">
</a>
<!-- Collapse -->
<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>
<!-- Links -->
<div class="collapse navbar-collapse text-center" id="navbarSupportedContent">
<!-- Left -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#port">Portfolio</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a href="https://www.linkedin.com/in/andreasanchez2/" class="nav-link" target="_blank" title="Follow on LinkedIn">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="nav-item">
<a href="https://github.com/dec23rd1986" class="nav-link" target="_blank" title="Follow on Github">
<i class="fa fa-github"></i>
</a>
</li>
<li class="nav-item">
<a href="https://twitter.com/dec23rd1986" class="nav-link" target="_blank" title="Follow on Twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link" title="Contact">
<i class="fa fa-envelope mr-3"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
Don't set height on the Navbar. Remove the style="height:70px;".
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark scrolling-navbar">
<div class="container">
...
</div>
</nav>
Working as expected
I am building a website which allows users to send messages to each other. I get number of new messages using AJAX. Therefore, I just need to find a way how to display a badge in users's navbar.
Here is what I want to achieve:
I want the badge to be created using <span class="badge badge-pill badge-primary">1</span>.
My code for navbar:
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-laravel" style="margin-bottom: 20px;">
<div class="container">
<a class="navbar-brand" href="#">Website</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">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="messages">Messages <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">People <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Photos <span class="sr-only">(current)</span></a>
</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<li><a class="nav-link" href="#">Login</a></li>
<li><a class="nav-link" href="#">Register</a></li>
</ul>
</div>
</div>
</nav>
according to the image you posted, you can add the badge in the messages parent <li> like :
<li class="nav-item">
<span class="badge badge-pill badge-primary" style="float:right;margin-bottom:-10px;">1</span> <!-- your badge -->
<a class="nav-link" href="messages">Messages <span class="sr-only">(current)</span></a>
</li>
( assuming no javascript needed since you said you already have the ajax function ready to update the badge value ).
ofcourse, you can extract the inline styling to an external stylesheet
(here's a fiddle https://jsfiddle.net/k6x40tct/2/ )
hope this helps.
I am sorry if this is a repeat but I have searched and tried info I have found. Currently when on a mobile, my menu button doesn't drop down or enable me to select any other parts of the menu.
<!-- Navigation -->
<nav id="mainNav" class="navbar fixed-top navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false" aria-label="Toggle navigation">
Menu <i class="fa fa-bars"></i>
</button>
<div class="container">
<a class="navbar-brand" href="#page-top">Chunky Geek</a>
<div class="collapse navbar-collapse" id="navbarExample">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" title="about" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" title="services" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" title="portfolio" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" title="follow" href="#follow">Follow</a>
</li>
<li class="nav-item">
<a class="nav-link" title="contact" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I don't have enough rep to comment, so i'll send this as an answer.
Are you sure you have included both the css and js of bootstrap? For example, does this collapsible work?
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Looks like it is working for me in THIS FIDDLE
Make sure you are using the proper Bootstrap CDN for both CSS and JS. If they aren't all loaded and linked properly, it will not work. v3.3.7 and v4 are blelow:
Bootstrap v4
Bootstrap v3.3.7