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
Related
I have create some font awesome icons on my website and I have made them responsive by changing the font size in the CSS.
Desktop View:
Mobile View:
HTML:
<div class="icons">
<span class="fa-stack fa-4x">
<i class="far fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-hammer fa-stack-1x"></i>
</span>
<span class="fa-stack fa-4x">
<i class="far fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-wrench fa-stack-1x"></i>
</span>
<span class="fa-stack fa-4x">
<i class="far fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-clipboard fa-stack-1x"></i>
</span>
<span class="fa-stack fa-4x">
<i class="far fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-paint-roller fa-stack-1x"></i>
</span>
<span class="fa-stack fa-4x">
<i class="far fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-screwdriver fa-stack-1x"></i>
</span>
<span class="fa-stack fa-4x">
<i class="far fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-border-none fa-stack-1x"></i>
</span>
</div>
CSS:
.icon-background {
color: #000000;
}
.icons{
text-align:center;
}
.fa-stack{
font-size: 16px;
font-size: 4vw;
}
#media only screen and (max-width: 768px) {
.fa-stack{
font-size: 40px;
font-size: 10vw;
}
}
So visually they look fine as I expected. But there is one issue. I am thinking that may approach is not solid. Every device has different sizes and I kind of feel that there is no gaurantee that the icons will be displayed in two rows of three in every mobile view or it will remain in one line of six on desktop view.
So what I was thinking and this is my question, is there a way to state if a screen is more that 768px, to display in a single line, else if it's smaller then split the icons so they show as two rows of three?
You need to write CSS for each screen resolution. or use bootstrap
You should use bootstrap responsive layout system to endup your nightmares(write css for each media screen size). it will do this job.
Bootstrap responsive icons
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>
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?
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.
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.