I am useing Font Awesome 5. Some icons are not showing in Chrome. For example "fa-facebook-f". When I change the icon class to fa-facebook it works. Is there a way to fix it?
Here is what i see in chrome.
<a href="#" target="_blank" class="icon-facebook">
<i class="fab fa-facebook-f">
</i>
</a>
<a href="#" target="_blank" class="icon-twitter">
<i class="fab fa-twitter">
</i>
</a>
<a href="#" target="_blank" class="icon-google_plus">
<i class="fab fa-google-plus-g">
</i>
</a>
<a href="#" target="_blank" class="icon-pinterest">
<i class="fab fa-pinterest">
</i>
</a>
<a href="#" target="_blank" class="icon-linkedin">
<i class="fab fa-linkedin-in">
</i>
</a>
<a href="#" target="_blank" class="icon-instagram">
<i class="fab fa-instagram">
</i>
</a>
<a href="#" target="_blank" class="icon-tumblr">
<i class="fab fa-tumblr">
</i>
</a>
Import this css it will work for all the font awesome icons and also for all the versions of icons it will work.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
Add this code in your HTML file before body and style tag
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
And remember one thing that use class of that type
fab fa-linkedin
in some site it is given as
fa fa-linkedin
which is not working so use 'fab' in place of 'fa'
And you can use this icon in your website
for testing purpose you can use this code
<div class="row text-center">
<!-- Team item-->
<div class="col-xl-3 col-sm-6 mb-5">
<div class="bg-white rounded shadow-sm py-5 px-4"><img src="https://res.cloudinary.com/mhmd/image/upload/v1556834132/avatar-4_ozhrib.png" alt="" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm">
<h5 class="mb-0">Vishal Jat</h5><span class="small text-uppercase text-muted">CEO - Founder</span>
<ul class="social mb-0 list-inline mt-3">
<li class="list-inline-item"><i class="fab fa-facebook-f"></i></li>
<li class="list-inline-item"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item"><i class="fab fa-instagram"></i></li>
<li class="list-inline-item"><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</div>
Its working fine...Its maybe you are not linking the correct font-awesome file
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<a href="#" target="_blank" class="icon-facebook">
<i class="fab fa-facebook-f">
</i>
</a>
<a href="#" target="_blank" class="icon-twitter">
<i class="fab fa-twitter">
</i>
</a>
<a href="#" target="_blank" class="icon-google_plus">
<i class="fab fa-google-plus-g">
</i>
</a>
<a href="#" target="_blank" class="icon-pinterest">
<i class="fab fa-pinterest">
</i>
</a>
<a href="#" target="_blank" class="icon-linkedin">
<i class="fab fa-linkedin-in">
</i>
</a>
<a href="#" target="_blank" class="icon-instagram">
<i class="fab fa-instagram">
</i>
</a>
<a href="#" target="_blank" class="icon-tumblr">
<i class="fab fa-tumblr">
</i>
</a>
You can use "fab" in class instead of "fa"
<i class="fab fa-linkedin"></i>
This will surely work. Replace "fa" with "fab" or "fas".
Have you imported the css, js but also the etf files which describes the font ?
If yes, then try this class name instead of "fab" which is not referenced in the doc
<i class="fas fa-camera-retro"></i>
This class name works fine for linkedin:
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
used the below link in index.html under head tag :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css">
Related
I am using Bootstrap-4 for my new website. I am using the drop-down in multiple places of the page. In the header nav-bar the drop-down works fine but when I use the same drop-down logic inside the page, bootstrap or popper is adding some inline styles, messing up my styles. Is there a way to disable this automatic inline CSS from getting added?
Below is the screenshot of faulty drop-down in the page,
Below is the screenshot of the correct dropdown in the top header.
Edit:
Code
Faulty Dropdown
<div className="pull-right">
<div className="dropdown">
<a
href="#sfsd"
className="dropdown-toggle"
data-toggle="dropdown"
id="dropdownMenuLink"
aria-haspopup="true"
aria-expanded="false"
>
<i className="fa fa-ellipsis-v" aria-hidden="true" />
</a>
<ul className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<li className="dropdown-item">
<a href="#">
<i className="fa fa-language mr-2" />
<span>Switch to Arabic</span>
</a>
</li>
<li className="dropdown-item">
<a href="#UpdatePersonalInfo">
<i className="fa fa-user mr-2" />
<span>My Profile</span>
</a>
</li>
<li className="dropdown-item">
<a href="#ChangeSecuritySettings">
<i className="fa fa-cog mr-2" />
<span>My Configuration</span>
</a>
</li>
<li className="dropdown-item">
<a href="login.html">
<i className="fa fa-sign-out mr-2" />
<span>Logout</span>
</a>
</li>
</ul>
</div>
</div>
Correct Dropdown
<div className="user-menu dropdown pull-right">
<a
href="#Menu"
className="dropdown-toggle"
data-toggle="dropdown"
aria-expanded="false"
>
<i className="fa fa-gear fa-spin" />
</a>
<ul className="dropdown-menu dropdown-menu-right">
<li className="dropdown-item">
<a href="#">
<i className="fa fa-language mr-2" />
<span>Switch to Arabic</span>
</a>
</li>
<li className="dropdown-item">
<a href="#UpdatePersonalInfo">
<i className="fa fa-user mr-2" />
<span>My Profile</span>
</a>
</li>
<li className="dropdown-item">
<a href="#ChangeSecuritySettings">
<i className="fa fa-cog mr-2" />
<span>My Configuration</span>
</a>
</li>
<li className="dropdown-item">
<a href="login.html">
<i className="fa fa-sign-out mr-2" />
<span>Logout</span>
</a>
</li>
</ul>
As stated in the docs, you can use the data-display option....
"By default, we use Popper.js for dynamic positioning. Disable this
with static."
Just remember that then you'll have to handle positioning of the dropdown menu.
https://www.codeply.com/go/85fPF73EtF
Related: Bootstrap 4 dropdown menu within accordion
Please add your custom css code (it is not real solution but working )
#media (min-width: 0px) and (max-width: 991px) {
.dropdown-menu.show {
transform: unset !important;
position: unset !important;
}
}
I am using Font Awesome 5.0.13. Some icons are not showing in Chrome. For example "fa-instagram". Is there a way to fix it or just wait for the next release? Here is what I see in chrome.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<a href="#" target="_blank" class="icon-facebook">
<i class="fab fa-facebook-f">
</i>
</a>
<a href="#" target="_blank" class="icon-twitter">
<i class="fab fa-twitter">
</i>
</a>
<a href="#" target="_blank" class="icon-google_plus">
<i class="fab fa-google-plus-g">
</i>
</a>
<a href="#" target="_blank" class="icon-pinterest">
<i class="fab fa-pinterest">
</i>
</a>
<a href="#" target="_blank" class="icon-linkedin">
<i class="fab fa-linkedin-in">
</i>
</a>
<a href="#" target="_blank" class="icon-instagram">
<i class="fab fa-instagram">
</i>
</a>
<a href="#" target="_blank" class="icon-tumblr">
<i class="fab fa-tumblr">
</i>
</a>
Try to remove the integrity, just like this:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<a href="#" target="_blank" class="icon-facebook">
<i class="fab fa-facebook-f">
</i>
</a>
<a href="#" target="_blank" class="icon-twitter">
<i class="fab fa-twitter">
</i>
</a>
<a href="#" target="_blank" class="icon-google_plus">
<i class="fab fa-google-plus-g">
</i>
</a>
<a href="#" target="_blank" class="icon-pinterest">
<i class="fab fa-pinterest">
</i>
</a>
<a href="#" target="_blank" class="icon-linkedin">
<i class="fab fa-linkedin-in">
</i>
</a>
<a href="#" target="_blank" class="icon-instagram">
<i class="fab fa-instagram">
</i>
</a>
<a href="#" target="_blank" class="icon-tumblr">
<i class="fab fa-tumblr">
</i>
</a>
The correct <link> with the hash is:
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-oi8o31xSQq8S0RpBcb4FaLB8LJi9AT8oIdmS1QldR8Ui7KUQjNAnDlJjp55Ba8FG" crossorigin="anonymous">
I'm trying to modify dashboard from Bootstrap. I added icons before the texts on the sidebar similar to this. I did inspect the latter but it doesn't have something special CSS codes to make the texts have a uniform number of space and alignment.
This is my code:
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="/">
<div>
<i id="icon-dashboard" class="fa fa-tachometer icon" aria-hidden="true"></i>
<span class="nav-link-text">Dashboard</span> <span class="sr-only">(current)</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/books">
<div>
<i id="icon-book" class="fa fa-book icon" aria-hidden="true"></i>
<span class="nav-link-text">Book</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/transactions">
<div>
<i id="icon-transaction" class="fa fa-handshake-o icon" aria-hidden="true"></i>
<span class="nav-link-text">Transaction</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/reports">
<div></div>
<div>
<i id="icon-report" class="fa fa-bar-chart icon" aria-hidden="true"></i>
<span class="nav-link-text">Report</span>
</div>
</a>
</li>
</ul>
Please help me figure out. I have no clue how to do it. Thanks.
The icons in question, in the example provided, apply a fixed width for a uniform layout throughout corresponding list-items; which may also have icons nested within them of varying widths.
Consider using fixed width icons by declaring the class fa-fw on icons in list-items.
Use fa-fw to set icons at a fixed width. Great to use when different
icon widths throw off alignment. Especially useful in things like nav
lists & list groups.
Font Awesome Examples - Fixed Width Icons
Code Snippet Demonstration:
.list-group {
margin: 20px;
}
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
I'm trying to put some buttons at the right area of the tab panels header:
I don't know how to to that with boostrap...
This is the code for the tabs:
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">
<a href="#header" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-info fa-stack-1x text-primary"></i>
</span> Inforazioni Principali
</a>
</li>
<li>
<a href="#shipping" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-truck fa-stack-1x text-primary"></i>
</span> Spedizioni
</a>
</li>
<li>
<a href="#payment" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-eur fa-stack-1x text-primary"></i>
</span> Pagamenti
</a>
</li>
</ul>
<div class="tab-content" style="min-height: 758px">
<div class="tab-pane active" id="header"> //FIRST PANEL HERE
......
What is the correct method to add two buttons at the right site of the panel labels?
I want to make the buttons aligned with the panel labels but I don't know how to do that...
Thanks
Add two additional li tags in your ul named nav-tabs in your nav bar with a class named button (to prevent other items from being affected)
and style as follows:
.button{
float:right !important;
margin-right:5px;
margin-left:5px;
padding:5px;
border:solid red;
}
Snippet below
.button{
float:right !important;
margin-right:5px;
margin-left:5px;
padding:5px;
border:solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs tb">
<li class="active">
<a href="#header" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-info fa-stack-1x text-primary"></i>
</span> Inforazioni Principali
</a>
</li>
<li>
<a href="#shipping" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-truck fa-stack-1x text-primary"></i>
</span> Spedizioni
</a>
</li>
<li>
<a href="#payment" data-toggle="tab">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x text-primary"></i>
<i class="fa fa-eur fa-stack-1x text-primary"></i>
</span> Pagamenti
</a>
</li>
<li class="button">
BUTTON1
</li>
<li class="button">
BUTTON2
</li>
</ul>
<div class="tab-content" style="min-height: 758px">
<div class="tab-pane active" id="header"> //FIRST PANEL HERE
How can I have stacked icons and apply fixed width to both icons (or to the stack itself)?
<div class="col-md-4">
<p>
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</p>
</div>
The above example does not result in a fixed width icon. Adding fa-fw to the span class does not resolve the issue. Thoughts?
Seems that a newer version of Font Awesome fixes this issue. I am using v4.4 below.
<div class="col-md-4">
<div class="list-group">
<a class="list-group-item" href="#">
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</a>
<a class="list-group-item" href="#">
<span class="fa-stack">
<i class="fa fa-fw fa-stack-2x"></i>
<i class="fa fa-fw fa-stack-1x fa-anchor"></i>
</span> Anchor
</a>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="col-md-4">
<div class="list-group">
<a class="list-group-item" href="#">
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</a>
<br>
<a class="list-group-item" href="#">
<span class="fa-stack">
<i class="fa fa-fw fa-stack-2x"></i>
<i class="fa fa-fw fa-stack-1x fa-anchor"></i>
</span> Anchor
</a>
</div>
</div>
In order for the rest of the icons in the list-group to appear with the same fixed width they have to be stacked behind an empty icon.
I did not test it but what if you try :
<div class="col-md-4">
<p>
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop" style="font-size:20px"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse" style="font-size:20px"></i>
</span> Some text
</p>
</div>
... and adjust the values to fit the width attempted.
If it works, you could overwrite the original styles .fa-stop, .fa-exclamation ... directly in your CSS stylesheet. Maybe you will have to use !important hack.