I have an icon and I want four of such icon to be placed side by side using minimum css
Here is my HTML code:-
<span class="fa-stack fa-2x" style="margin-left: 32%;margin-top: -13px;">
<i class="fa fa-square-o fa-stack-2x"></i>
<div style="position: absolute;font-size:1.4vw;margin-left:40%">1</div>
</span>
You can try something like the following:
i.fa.fa-square-o.multi-4x:after {
content:"\f096\f096\f096";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-2x" style="margin-left: 32%;margin-top: -13px;">
<i class="fa fa-square-o fa-stack-2x multi-4x"></i>
<div style="position: absolute;font-size:1.4vw;margin-left:40%">1</div>
</span>
Related
I'm creating a card in bootstrap with some social media icons (Font-awesome). For some reason all my icons are treated as boxes and have a black outline around them. My hover shadows also wrap around the square rather than the icon itself.
Why does this happen and how can I fix it?
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12 text-center">
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#00aced;"></i>
<i class="fa fa-twitter fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#0077B5;"></i>
<i class="fa fa-linkedin fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#171515;"></i>
<i class="fa fa-github fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
</div>
The box border is being generated by they type="button" parameter in your anchors, which has a defined -webkit-appearance: button; in bootstrap's stylesheet. So remove that type="button" parameter, or style it as desired.
As for the shadows, if you want them to keep the shape of the icon instead of being boxed, you should either use text-shadow or filter: drop-shadow instead of box-shadow
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>
I'm attempting to stack two icons. My attempt looks awful, because the central icon isn't centred within the fa-circle-o.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
<i class="fa fa-th-large fa-stack-1x"></i>
<i class="fa fa-circle-o fa-stack-2x"></i>
</span>
Is there a nice way to resolve this within the stacking system provided by font awesome?
As far as I know, you can't solve that using font-awesome classes, but you can do a very simple styling applying margin-top: 1px
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
<i class="fa fa-th-large fa-fw fa-stack-1x" style="margin-top: 1px"></i>
<i class="fa fa-circle-o fa-fw fa-stack-2x"></i>
</span>
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
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>