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.
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 need to group 2 icons like . I've tried to use fa-stack class but it overlaps the images and I don't know how to put one above another.
<span class="fa-stack fa-lg">
<i class="fa fa-envelope fa-stack-1x"></i>
<i class="fa fa-ellipsis-h fa-stack-2x"></i>
</span>
If you are using same structure, you can move the second icon little up using css negative margin.
<span class="fa-stack fa-lg">
<i class="fa fa-envelope fa-stack-1x"></i>
<i class="fa fa-ellipsis-h fa-stack-2x"></i>
</span>
span i:not(:first-child){
margin-top:-15px;
}
Here is an example
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 know this sound crazy or easy but I'm not getting any result.
I'm working on bootstrap accordion and I'm trying to figure out how to write in CSS to allow show ALL color Blue in (icon, text and background color) in at the SAME TIME using CSS :focus when person clicked the link or accordion...
please see one line of accordion of codes...
<i class="fa fa-user" aria-hidden="true"></i> Members
or please see the whole sample of each accordion buttons...
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<dl class="accordion">
<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i> Manage</span><i class="accordion_icon fa fa-chevron-up"></i></dt>
<dd class="accordion_content">
<div class="list-group">
<i class="fa fa-tachometer blue" aria-hidden="true"></i> Dashboard
<i class="fa fa-users" aria-hidden="true"></i> Members
<i class="fa fa-clipboard" aria-hidden="true"></i> Posts
<i class="fa fa-tachometer" aria-hidden="true"></i> Vestibulum at eros
</div>
</dd>
<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i> Settings</span><i class="accordion_icon fa fa-chevron-up"></i></dt>
<dd class="accordion_content">
<div class="list-group">
<i class="fa fa-user" aria-hidden="true"></i> Members
<i class="fa fa-clipboard" aria-hidden="true"></i> Posts
<i class="fa fa-comments" aria-hidden="true"></i> comments
<i class="fa fa-user-secret" aria-hidden="true"></i> Privacy
<i class="fa fa-bell" aria-hidden="true"></i> Notifications
<i class="fa fa-envelope" aria-hidden="true"></i> Emails
<i class="fa fa-globe" aria-hidden="true"></i> Sites Infor
</div>
</dd>
Icons are misaligned if I use directive and working fine if I used plain html code..
Method 1) font awesome icons using directives (icons are horizontally misaligned):
js:
app.directive("roIcon", function() {
return {
restrict: "E",
templateUrl: "templates/roIcon.html",
scope: {
type: "#"
}
};
});
"roIcon.html" template:
<span ng-if="type === 'add'">
<i class="fa fa-plus"></i>
</span>
<span class="fa-stack fa-lg stacked-icons" ng-if="type === 'export-file'">
<i class="fa fa-file-o fa-stack-2x"></i>
<span class="fa-stack stack-bg">
<i class="fa fa-arrow-right fa-small fa-stack-1x"></i>
</span>
</span>
<span class="fa-stack fa-lg stacked-fork" ng-hide="isTile == true" ng-if="type === 'start-workflow'">
<i class="fa fa-code-fork fa-rotate-90 fa-stack-2x"></i>
<span class="fa-stack stack-bg">
<i class="fa fa-plus fa-small fa-stack-1x"></i>
</span>
</span>
Icons directive included in html:
<ro-icon type="add"></ro-icon>
<ro-icon type="export-file"></ro-icon>
<ro-icon type="start-workflow"></ro-icon>
Method 2) Direct inclusion of icons into html file is working fine:
<span>
<i class="fa fa-plus"></i>
</span>
<span class="fa-stack fa-lg stacked-icons" title="export file">
<i class="fa fa-file-o fa-stack-2x"></i>
<span class="fa-stack stack-bg">
<i class="fa fa-arrow-right fa-small fa-stack-1x"></i>
</span>
</span>
<span class="fa-stack fa-lg stacked-fork">
<i class="fa fa-code-fork fa-rotate-90 fa-stack-2x"></i>
<span class="fa-stack stack-bg">
<i class="fa fa-plus fa-small fa-stack-1x"></i>
</span>
</span>
The only difference I can see in both the view source is the icons rendered with directives contains a wrapper non-html tag ...., the rest of the html is same.
I am not able to find out whether this non-html tag is making any difference in alignment as shown in figure?
Appreciate your help..