I didn't find how to stack icon moon from FA :
<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-moon fa-stack-1x fa-inverse"></i>
</span> sleep
JSFiddle demo: http://jsfiddle.net/myYUh/90/
Icon is hidden, we only see the square :/
You have two problems here. The first is a typo: Font Awesome has no fa-moon icon, however it does have a fa-moon-o icon:
Once you've fixed that, the next problem is that the fa-inverse class gives your fa-moon-o icon a colour of #fff (white), which makes it invisible on top of the white page background which you see through the fa-square-o icon.
Unless your own page has a background which isn't white, to fix this, either remove the fa-inverse class:
<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-moon-o fa-stack-1x"></i>
</span> sleep
JSFiddle demo.
Or change fa-square-o to fa-square:
<span class="fa-stack">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-moon-o fa-stack-1x fa-inverse"></i>
</span> sleep
JSFiddle demo.
Related
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
I am trying to create a link from some font-awesome icons within a span- and i-tag, however, this does not work. I am using the following code:
<a href="mailto:?subject=Test&body=Test">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</span>
</a>
Try to change the version of stylesheet, Sometimes they do misbehave
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<a href="mailto:?subject=Test&body=Test">
<span class="fa fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</span>
</a>
You may also try to change referencing to the minified version to uncompressed version. It will all depends.
your code is fine you need to add font-awesome.css file and font folder
Are you trying to layer all 3 of the icons?
So using this code
<li><a href="https://8ball.gg/"><i span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<span class="fa fa-stack-1x" style="color:black;">
<span style="font-size:40px; margin-top:-20px;">
8
</span>
</span>
</i></a></li>
on jsfiddle.net works fine? But once i try and use it on my site i get a problem where its not stacked. screenshot - https://gyazo.com/3bbb79f81212e497a9a079ab7baf8836
If someone can help id appreciate
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
link: http://perlabeautysalon.com
Im trying to create a square background (with font awesome) and stack a users icon on top of it.. however, for some reason.. it wont display right.. one icon is below the other...
heres my code
<span class="fa-stack" style="color:#EA5555">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-users fa-stack-1x fa-inverse"></i>
</span>
I think you code is fine, I'm just not sure why you have "br" tags:
<span style="color:#EA5555" class="fa-stack"><br>
<i class="fa fa-square fa-stack-2x"></i><br>
<i class="fa fa-users fa-stack-1x fa-inverse"></i><br>
</span>
When I remove them in your site using Firebug - the icon seems to be what you need.