This question already has answers here:
Font Awesome Background color
(6 answers)
how to stylize a circle Fontawesome icon background?
(3 answers)
Closed 5 years ago.
I'm trying to fill the times-circle icon from FontAwesome which is transparent inside.
<i class="fa fa-times-circle fa-lg" aria-hidden="true"></i>
So I tried to apply a background-color: white to this element but since the element is squared I have a squared background. I also tried to apply a border-radius: 100% to obtain a rounded element but nothing...
So my question is how to fill the cross inside this icon ?
Thanks.
http://fontawesome.io/examples/#stacked
Stack your icons using the fa-stack class and fa-stack-Nx classes for your icons:
.fa-stack .fa-circle{
color: fuchsia;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
More examples:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<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<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera
Related
I have these div below taht have a font swesome icon with a circle around them. But they aren't aligned correclty as the width aren't the same, so the text isn't vertically aligned.
Can this be fixed, I remember some class that I could use to fix it, but don't remember the class name.
.circle-icon {
background: #e3f4f6;
padding: 10px;
border-radius: 50%;
}
<div>
<span><i class="fa fa-user fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Like<ng-container *ngIf="member.reviews > 1">s</ng-container> </span>
</div>
<div>
<span><i class="fa fa-star fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Review<ng-container *ngIf="member.reviews > 1">s</ng-container> </span>
</div>
<div>
<span><i class="fa fa-check fa-lg rating-color mr-2 circle-icon" aria-hidden="true"></i></span> <span>Verified</span>
</div>
Use stacking icons: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
.fa-circle {
color: #e3f4f6;
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-user fa-stack-1x" aria-hidden="true"></i>
</span>
<span>10 Likes</span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-star fa-stack-1x" aria-hidden="true"></i>
</span> <span>8 Reviews </span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-check fa-stack-1x" aria-hidden="true"></i>
</span> <span>Verified</span>
</div>
Works also with the CSS version:
.fa-circle {
color: #e3f4f6;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-user fa-stack-1x" aria-hidden="true"></i>
</span>
<span>10 Likes</span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-star fa-stack-1x" aria-hidden="true"></i>
</span> <span>8 Reviews </span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-check fa-stack-1x" aria-hidden="true"></i>
</span> <span>Verified</span>
</div>
You can simply use the width atribute and give every cricle-icon the same width.
I'm trying to put some Font Awesome icons over a div element, making it look like a circle that contains the icons. There are in total three icons inside a circle each, and all the circle have to be next to each other. But when I try to do it the icons are not positioned correctly and the circles move out of place. I don't know what I'm doing wrong.
.python {
width: 200px;
height: 200px;
display: inline-block;
border-radius: 50%;
margin-left: 183px;
background-color: lightblue;
}
.fa-python{
font-size: 100px;
display: inline-block;
position: relative;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<div class="python">
<i class="fab fa-python"></i>
</div>
Font Awesome already allow this, you don't need to do it yourself:
.custom .fa-circle:before {
border-radius: 50%;
background: linear-gradient(red, blue);
color: transparent;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class="fa-stack fa-2x">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fab fa-python fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" style="color:lightblue"></i>
<i class="fab fa-python fa-stack-1x "></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" style="color:blue"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" ></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x custom">
<i class="fas fa-circle fa-stack-2x" ></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Related: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
Same code works for the V6 as well:
.custom .fa-circle:before {
border-radius: 50%;
background: linear-gradient(red, blue);
color: transparent;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.0/css/all.css">
<span class="fa-stack fa-2x">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fab fa-python fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" style="color:lightblue"></i>
<i class="fab fa-python fa-stack-1x "></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" style="color:blue"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" ></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x custom">
<i class="fas fa-circle fa-stack-2x" ></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
I think is easier to just use flex
.python {
width: 200px;
height: 200px;
display: flex;
border-radius: 50%;
justify-content: center;
align-items: center;
}
or grid
{
display: grid;
place-content: center;
}
I can't seem to change to size of the font awesome icons within a stacked set. I would like the icons to be smaller they currently are.
Do I need to create an additional css rule?
My code so far is;
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x icon-background4"></i>
<i class="fa fa-circle-thin fa-stack-2x icon-background6"></i>
<i class="fa fa-lock fa-stack-1x"></i>
</span>
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x icon-background5"></i>
<i class="fa fa-camera fa-stack-1x"></i>
</span>
CSS
.icon-background4 {
color: #c0ffc0;
}
.icon-background6 {
color: #40c040;
}
.icon-background5 {
color: #c0c0ff;
}
Fiddle.
Notes
I don't want to use inline styling in the html.
I want to outer circle to remain the same size
Any help is appreciated.
font-awesome icons is a font and not graphics. So it can be sized by simply using font-size
When you add the built-in classes, you just applies the css properties via a class.
I need to add !important otherwise it doesn’t work. Maybe it could be improved but you can see how it works in the code fiddle
.icon-background4 {
color: #c0ffc0;
}
.icon-background6 {
color: #40c040;
}
.icon-background5 {
color: #c0c0ff;
}
.fa-camera {
font-size: 10px;
}
/* */
.test-icon-size {
font-size: 15px !important;
}
.test-icon-size-2 {
font-size: 40px !important;
}
.test-icon-size-3 {
font-size: 60px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!-- v2 -->
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x icon-background5"></i>
<i class="fa fa-camera fa-stack-1x test-icon-size"></i>
</span>
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x icon-background5"></i>
<i class="fa fa-camera fa-stack-1x test-icon-size-2"></i>
</span>
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x icon-background5"></i>
<i class="fa fa-camera fa-stack-1x test-icon-size-3"></i>
</span>
Instead of <span class="fa-stack fa-5x"> , try fa-2x or 3x as per your requirement. If you want a default size, then completely remove fa-5x from the parent span tag.
Try with below code.
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x icon-background4"></i>
<i class="fa fa-circle-thin fa-stack-2x icon-background6"></i>
<i class="fa fa-lock fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x icon-background5"></i>
<i class="fa fa-camera fa-stack-1x"></i>
</span>
So I've been trying to do a quick animation that replaces an entire span on hover but I can't seem to get it to work. How should I approach going about replacing a span on hover?
<h1>I need this replaced...</h1>
<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>
<h1>to this</h1>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
<h1>on hover</h1>
Sample CodePen here.
By changing the :before css properties for the twitter on hover you can achieve the output.
span.fa-stack:hover i.fa-twitter:before{content:"\f024"; color:#fff}
span.fa-stack:hover i.fa-square-o:before{content:"\f111"}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1>I need this replaced...</h1>
<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>
You can achieve this in CSS by combining the :hover and :first-child/:last-child CSS selectors.
.fa-stack.fa-lg:hover :first-child:before {
content: "\f111";
}
.fa-stack.fa-lg:hover :last-child:before {
content: "\f024";
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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>
I am trying to create a "vegetarian" icon by stacking fa-circle on fa-square-o. The problem is that the circle is not centrally aligned vertically with respect to the square. I tried using margin/padding/vertical-align css properties but they have no effect whatsoever. my code is:
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x " ></i>
</span>
You can move it up, by adding a top:
.fa-stack-1x {
top: -1px;
}
By looking at the following example you can quickly guess, that the problem with centering the circle is not do to the circles vertical-align value, it's height, or top and left position.
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
.fa-square-o {
color: rgb(0, 255, 0);
}
.fa-circle {
color: rgba(255, 0, 0, .5);
}
<span class="fa-stack fa-5x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-2x"></i>
</span>
<span class="fa-stack fa-5x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x"></i>
</span>
The circle just does not fit into the square, because the font-size value of the .fa-stack-2x class, with a default value of 2em, is oblivious too small for the circle to fit into the square.
The easiest way to fix this is by increasing the font-size value of the icon used as the fa-stack-2x element.
#import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
.fa-square-o {
color: rgb(0, 255, 0);
font-size: 2.16em;
}
.fa-circle {
color: rgba(255, 0, 0, .5);
}
<span class="fa-stack fa-5x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-2x"></i>
</span>
<span class="fa-stack fa-5x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x"></i>
</span>
<span class="fa-stack fa-4x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-2x"></i>
</span>
<span class="fa-stack fa-3x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-2x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x"></i>
</span>
from the documentation http://fortawesome.github.io/Font-Awesome/3.2.1/examples/#stacked
A method for easily stacking multiple icons. Use the icon-stack class on the parent and icon-stack-base for the bottom icon. You may need to swap icon for fa depending on the implementation you are using
so try
<span class="icon-stack">
<i class="fa-square-0 icon-stack-base"></i>
<i class="fa fa-circle icon-light"></i>
If size is a problem you could use the fa-dot-circle-o then stack a white circle over it, leaving you with just a dot - or use a unicode font with the middle dot for the circle, eg unifoundry's unifont.
The standard way to vertically align in css is to set height and line-heightequal to each other, then set vertical-align: middle