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">
Related
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">
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
I just created a vertical bootstrap navigation bar and it looking like this:
Now my problem is when I test the app on a phone, instead of collapsing, it just disappear and the 3 lines does not appear.
Here is the code:
<div class="navbar-collapse collapse">
<ul class="sidebar-menu">
<li class="header">MAIN MENU</li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span class="glyphicon glyphicon-home"> Home</span> <i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i><span class="glyphicon glyphicon-folder-open"> Patients</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span class="glyphicon glyphicon-calendar"> Appointments</span>
<span class="label label-primary pull-right">4</span>
</a>
</li>
<li>
<a href="widgets.html">
<i class="fa fa-th"></i> <span class="glyphicon glyphicon-list-alt"> Daily Reports</span> <!--<small class="label pull-right bg-green">income reports</small>-->
</a>
</li>
<li>
<a href="widgets.html">
<i class="fa fa-th"></i> <span class="glyphicon glyphicon-list"> Monthly Reports</span> <!--<small class="label pull-right bg-green">income reports</small>-->
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-pie-chart"></i>
<span class="glyphicon glyphicon-credit-card"> Debts</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span class="glyphicon glyphicon-usd"> Outlay</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span class="glyphicon glyphicon-scale"> Statistics</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span class="glyphicon glyphicon-plus"> Equipments/Tools</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
</li>
</ul>
</div>
Have you intentionally not pasted your button code in your question?
If not, you should also have the following:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#uniqueid" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
You'll also want to add an id to your menu wrapper:
<div class="navbar-collapse collapse" id="uniqueid">
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.