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
Related
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>
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>
I have been at this for way too long and have yet to figure out how to stack four font-awesome icons on top of each other. I've gotten to three but I am wanting my icons to look like this (sorry for crummy image)
Here's the HTML for my three stacked.
<span class="fa-stack fa-4x">
<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-cutlery fa-inverse fa-stack-1x"></i>
</span>
The CSS
.icon-stack-1x {
line-height: inherit;
}
.icon-stack-2x {
font-size: 1.5em;
}
set display:flex on .fa-cutlery and .fa-inverse to .fa-circle-thin
and background-color to span
body {
background: red
}
span {
background: black;
border-radius: 100%
}
.fa-cutlery {
display: flex
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-circle-thin fa-stack-2x fa-inverse"></i>
<i class="fa fa-cutlery fa-inverse 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