I am trying to get some space between my 4 fa-icons to spread them out more across the page. I'd like them to take up around 75% of the page. The HTML and accompanying CSS is shown below:
.fa-icons {
padding: 15px;
text-align: center;
}
.icon-background-face {
color: #3b5998;
}
.fa-facebook {
color: #fff;
}
.facebook i {
margin-right: 100px;
}
.icon-background-twit {
color: #00aced;
}
.fa-twitter {
color: #fff;
}
.icon-background-tube {
color: #bb0000;
}
.fa-youtube {
color: #fff;
}
.icon-background-env {
color: #000000;
}
.fa-envelope {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="fa-icons">
<span class="fa-stack fa-5x">
<a href="" target="_blank">"
<i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
<i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
<i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
<i class="fa fa-youtube fa-1x fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="">
<i class="fa fa-circle fa-stack-2x icon-background-env"></i>
<i class="fa fa-envelope fa-1x fa-stack-1x"></i>
</a>
</span>
</div>
Just use margin like this:
.fa-stack {
margin-right: 10px; <-- change accordingly
}
Create a custom class name for the last div and add margin-right: 0; to prevent unwanted margin after that div.
You can simply add margin to the fas, see the following example:
.fa-icons {
padding: 15px;
text-align: center;
}
.fa-icons span {
margin: 0 20px;
}
.icon-background-face {
color: #3b5998;
}
.fa-facebook {
color: #fff;
}
.facebook i {
margin-right: 100px;
}
.icon-background-twit {
color: #00aced;
}
.fa-twitter {
color: #fff;
}
.icon-background-tube {
color: #bb0000;
}
.fa-youtube {
color: #fff;
}
.icon-background-env {
color: #000000;
}
.fa-envelope {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="fa-icons">
<span class="fa-stack fa-5x">
<a href="" target="_blank">"
<i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
<i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
<i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
<i class="fa fa-youtube fa-1x fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="">
<i class="fa fa-circle fa-stack-2x icon-background-env"></i>
<i class="fa fa-envelope fa-1x fa-stack-1x"></i>
</a>
</span>
</div>
codepen
.fa-icons {
text-align: center;
width: 75%;
display: table;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.fa-icons>span{
display: table-cell;
vertical-align:top;
}
.icon-background-face {
color: #3b5998;
}
.fa-facebook {
color: #fff;
}
.icon-background-twit {
color: #00aced;
}
.fa-twitter {
color: #fff;
}
.icon-background-tube {
color: #bb0000;
}
.fa-youtube {
color: #fff;
}
.icon-background-env {
color: #000000;
}
.fa-envelope {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="fa-icons">
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
<i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
<i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
<i class="fa fa-youtube fa-1x fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="">
<i class="fa fa-circle fa-stack-2x icon-background-env"></i>
<i class="fa fa-envelope fa-1x fa-stack-1x"></i>
</a>
</span>
</div>
Related
I'm trying to put some Font Awesome icons over a div element, making it look like a circle that contains the icons. There are in total three icons inside a circle each, and all the circle have to be next to each other. But when I try to do it the icons are not positioned correctly and the circles move out of place. I don't know what I'm doing wrong.
.python {
width: 200px;
height: 200px;
display: inline-block;
border-radius: 50%;
margin-left: 183px;
background-color: lightblue;
}
.fa-python{
font-size: 100px;
display: inline-block;
position: relative;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<div class="python">
<i class="fab fa-python"></i>
</div>
Font Awesome already allow this, you don't need to do it yourself:
.custom .fa-circle:before {
border-radius: 50%;
background: linear-gradient(red, blue);
color: transparent;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class="fa-stack fa-2x">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fab fa-python fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" style="color:lightblue"></i>
<i class="fab fa-python fa-stack-1x "></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" style="color:blue"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" ></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x custom">
<i class="fas fa-circle fa-stack-2x" ></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
Related: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
Same code works for the V6 as well:
.custom .fa-circle:before {
border-radius: 50%;
background: linear-gradient(red, blue);
color: transparent;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.0/css/all.css">
<span class="fa-stack fa-2x">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fab fa-python fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" style="color:lightblue"></i>
<i class="fab fa-python fa-stack-1x "></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" style="color:blue"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" ></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x custom">
<i class="fas fa-circle fa-stack-2x" ></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
I think is easier to just use flex
.python {
width: 200px;
height: 200px;
display: flex;
border-radius: 50%;
justify-content: center;
align-items: center;
}
or grid
{
display: grid;
place-content: center;
}
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 want to put a background to my FA icons, but something like a low opacity circle around them.
Code:
.social {display:block; float:left; margin:auto; height: 50px; font-size: 12px; padding-top:7px; width: 200px; text-align: center; text-decoration: none; border-bottom: 5px solid black;}
.social i {cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}
.social i:after {content: '\00bb'; position: absolute; opacity: 0; top: -1px; right: -50px; transition: 0.2s;}
.social:hover i {padding-right: 20px; color: white;}
.social:hover i:after {opacity: 1; right: 0;}
.my-facebook {background: transparent; color: #3b5998;}
.my-instagram {background: transparent; color: white;}
.my-codepen{background: transparent; color: black;}
.my-github{background: transparent; color: #f5f5f5;}
.my-linkedin{background: transparent; color: #00a0dc;}
.my-fcc{background: transparent; color: #006400;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="buttons">
<a class="social my-codepen" target='_blank' href="#"><i class="fa fa-codepen fa-3x"></i></a>
<a class="social my-github" target='_blank' href="#"><i class="fa fa-github fa-3x"></i></a>
<a class="social my-facebook" target='_blank' href="#"><i class="fa fa-facebook fa-3x"></i></a>
<a class="social my-fcc" target='_blank' href="#"><i class="fa fa-free-code-camp fa-3x"></i></a>
<a class="social my-linkedin" target='_blank' href="#"><i class="fa fa-linkedin fa-3x"></i></a>
<a class="social my-instagram" target='_blank' href="#"><i class="fa fa-instagram fa-3x"></i></a>
</div>
I've tried to change the "background" but it changes the whole square. I want only to give a circular background or a circular border around the icon itself.
Thanks to all!
You need to use stacked icons. I have modified your example for you below.
Code
.social {display:block; float:left; margin:auto; height: 50px; font-size: 12px; padding-top:7px; width: 200px; text-align: center; text-decoration: none; border-bottom: 5px solid black;}
.social i {cursor: pointer; display: inline-block; transition: 0.5s;}
.social i:after {content: '\00bb'; position: absolute; opacity: 0; top: -1px; right: -50px; transition: 0.2s;}
.social:hover i {padding-right: 20px; color: white;}
.social:hover i:after {opacity: 1; right: 0;}
.my-facebook {background: transparent; color: #3b5998;}
.my-instagram {background: transparent; color: black;}
.my-codepen{background: transparent; color: black;}
.my-github{background: transparent; color: black;}
.my-linkedin{background: transparent; color: #00a0dc;}
.my-fcc{background: transparent; color: #006400;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="buttons">
<a class="social my-codepen" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-codepen fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-github" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-facebook" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-fcc" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-free-code-camp fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-linkedin" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
<a class="social my-instagram" target='_blank' href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>
</a>
</div>
Jsfiddle Here
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'm using two Font Awesome icons:
fa-circle-thin
fa-user-plus
They are stacked on top of one another to give a circle icon look.
<span class="fa-stack fa-sm">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-user-plus fa-stack-1x "></i>
</span>
When I hover over I want the circle to be filled in black and the fa-user-plus to change to white. How can I achieve this?
See JSFiddle: http://jsfiddle.net/ReturnOfTheMac/Lwdaen75/
To achieve the desired effect, add a fa-circle icon to the stack that will be transparent on display (opacity:0.0) and solid (opacity:1.0) on :hover.
For example (also on JSFiddle: http://jsfiddle.net/2hxxuv52/5/):
HTML
<span class="fa-stack fa-sm">
<i class="fa fa-circle fa-stack-2x "></i>
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-user-plus fa-stack-1x "></i>
</span>
CSS
.fa-stack .fa { color: black; }
.fa-stack .fa.fa-circle-thin { color: black; }
.fa-stack .fa.fa-circle { opacity:0.0; color:black; }
.fa-stack:hover .fa.fa-user-plus { color: white; }
.fa-stack:hover .fa.fa-circle-thin { color: black; }
.fa-stack:hover .fa.fa-circle { opacity:1.0 }