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
Related
I would like to make a combination of icons via FA stack but it does not work. I have pure example from documentation and it shows me only empty squares. Code looks like:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<span class="fa-stack" style="vertical-align: top;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x"></i>
</span>
and the result looks like on the picture below (last icon on the line).
What am I doing wrong?
Use the correct CDN which is the one of the V5 not the V4
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class="fa-stack" style="vertical-align: top;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x"></i>
</span>
I have to use font awesome's exclamation triangle icon but I need to have the exclamation's mark in Red color and triangle's background in white.
When I change the color of the icon to Red, it does the opposite. Can someone help me with this?
<i class="fa fa-exclamation-triangle fa-3x" style = "color:#C00000"></i>
Unfortunatelly, the triangle is not in the FontAwesome collection, but if you doesn't matter if will be an square instead of a triangle, you can stack icons:
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x" style="color: white;"></i>
<i class="fa fa-exclamation fa-stack-1x fa-inverse" style="color:red;"></i>
</span>
See it working: http://jsfiddle.net/ao486t04/
A solution is to use the original exclamation triangle and stack it.
body {
background:red;
font-size:30px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-sm">
<i class="fa fa-exclamation fa-stack-2x fa-inverse" style="font-size:1.5em; padding-top:.2em"></i>
<i class="fa fa-exclamation-triangle fa-stack-2x" style="color:blue;"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-exclamation fa-stack-2x fa-inverse" style="font-size:1.5em; padding-top:.2em"></i>
<i class="fa fa-exclamation-triangle fa-stack-2x" style="color:blue;"></i>
</span>
You can create your vector icon in illustrator or corel draw. Or open your png of icon in photoshop and add red color with buket on the triangle area.. hope this hack helps
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..
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.
I am using Font-Awesome in a WordPress site have included the Font-Awesome CDN in my functions.php file according to this bit of php.
I can insert the icons into my site but am unable to get icons to stack according to this example code:
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o
You can see the output of this code here.
Does anyone have any thoughts on why this may not be working? I'm pretty sure that there are no CSS class clashes...
Doing view source on your page:
<span class="fa-stack fa-lg"><br />
<i class="fa fa-square-o fa-stack-2x"></i><br />
<i class="fa fa-twitter fa-stack-1x"></i><br />
</span>
The <br /> elements are breaking Font Awesome's CSS. I imagine WordPress is putting those in automatically for you, so try putting everything on one line so WordPress doesn't try to add any <br /> elements into the code:
<span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i></span>