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.
Related
<i class="fa fa-lg fa-eye" style="color:#007bff;"></i>
Please tell me the exact reason why this happen some font are showing while other show something else
Without your HTML it's hard to say why.
But, here is Font Awesome 6.12 working fine with fa-eye
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<div>
<span class="fa fa-lg fa-pencil"></span>
<span class="fa fa-lg fa-box-archive"></span>
<span class="fa fa-lg fa-eye"></span>
</div>
Font Awesome is installed, and most icons work. Facebook and Twitter icons, however, do not.
I have tried changing the fa class to fab, and vice versa: neither work.
Here is the code. The top icon renders correctly:
info#site.org <i class="fas fa-envelope" style="margin-left: 5px"></i><br />
#site <i class="fab fa-twitter" style="margin-left: 5px"></i><br />
site <i class="fa fa-facebook" style="margin-left: 5px"></i>
Any suggestions on how to get the social icons working is greatly appreciated!
Fix: This was just a case of not having updated FontAwesome to the latest version, so the icon references were broken. Easy mistake! Hopefully this helps someone.
Icons work properly. Probably you made an error somewhere.
<i class="fab fa-3x fa-facebook"></i>
<i class="fab fa-3x fa-facebook-f"></i>
<i class="fab fa-3x fa-facebook-square"></i>
<i class="fab fa-3x fa-twitter"></i>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/js/all.min.js"></script>
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 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.