I am using font awesome on some project but I have some things that I want to do with font awesome icons, I can easily call an icon like this:
<i class="fa fa-lock"></i>
Is it possible to all icon always be in round circle with border? Something like this, I have a picture:
Using
i {
background-color: white;
border-radius: 50%;
border: 1px solid grey;
padding: 10px;
}
Will do the effect, but the problem is that icons are always bigger that the text or element beside, any solutions?
This question is related to
css
font-awesome
I like Dave Everitt's answer with the « line-height » but it only works by specifying the « height » and then we have to add « !important » to line-height ...
.cercle {
font-size: 2em;
width: 2em;
height: 2em;
text-align: center;
line-height: 2em!important;
background: #666;
color: #fff;
border-radius: 2em;
}
em
as the base measurementif you use ems for the measurements, including line-height
, font-size
and border-radius
, with text-align: center
it makes things pretty solid:
#info i {
font-size: 1.6em;
width: 1.6em;
text-align: center;
line-height: 1.6em;
background: #666;
color: #fff;
border-radius: 0.8em; /* or 50% width & line-height */
}
try this
HTML:
<div class="icon-2x-circle"><i class="fa fa-check fa-2x"></i></div>
CSS:
i {
width: 30px;
height: 30px;
}
.icon-2x-circle {
text-align: center;
padding: 3px;
display: inline-block;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0px 0px 2px #888;
-webkit-box-shadow: 0px 0px 2px #888;
box-shadow: 0px 0px 2px #888;
}
You don't need css or html tricks for it. Font Awesome has built in class for it - fa-circle To stack multiple icons together you can use fa-stack class on the parent div
<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>
//And we have now facebook icon inside circle:)
You can also do this. I wanted to add a circle around my icomoon icons. Here is the code.
span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}
Font Awesome icons are inserted as a :before. Therefore you can style either your i or a like so:
.i {
background: #fff;
border-radius: 50%;
display: inline-block;
height: 20px;
width: 20px;
}
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
UPDATE:
Upon learning flex recently, there is a cleaner way (no tables and less css). Set the wrapper as display: flex;
and to center it's children give it the properties align-items: center;
for (vertical) and justify-content: center;
(horizontal) centering.
See this updated JS Fiddle
Strange that nobody suggested this before.. I always use tables to do this.
Simply make a wrapper have display: table
and center stuff inside it with text-align: center
for horizontal and vertical-align: middle
for vertical alignment.
<div class='wrapper'>
<i class='icon fa fa-bars'></i>
</div>
and some sass like this
.wrapper{
display: table;
i{
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
or see this JS Fiddle
You can simply get round icon using this code:
<a class="facebook-share-button social-icons" href="#" target="_blank">
<i class="fab fa-facebook socialicons"></i>
</a>
Now your CSS will be:
.social-icons {
display: inline-block;border-radius: 25px;box-shadow: 0px 0px 2px #888;
padding: 0.5em;
background: #0D47A1;
font-size: 20px;
}
.socialicons{color: white;}
Update: Rather use flex.
If you want precision this is the way to go.
Fiddle. Go Play -> http://jsfiddle.net/atilkan/zxjcrhga/
Here is the HTML
<div class="sosial-links">
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a>
<a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>
Here is the CSS
.sosial-links a{
display: block;
float: left;
width: 36px;
height: 36px;
border: 2px solid #909090;
border-radius: 20px;
margin-right: 7px; /*space between*/
}
.sosial-links a i{
padding: 12px 11px;
font-size: 20px;
color: #909090;
}
Have Fun
The below example didnt quite work for me,this is the version that i made work!
HTML:
<div class="social-links">
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a>
<a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>
CSS:
.social-links {
text-align:center;
}
.social-links a{
display: inline-block;
width:50px;
height: 50px;
border: 2px solid #909090;
border-radius: 50px;
margin-right: 15px;
}
.social-links a i{
padding: 18px 11px;
font-size: 20px;
color: #909090;
}
This is the approach you don't need to use padding
, just set the height
and width
for the a
and let the flex
handle with margin: 0 auto
.
.social-links a{_x000D_
text-align:center;_x000D_
float: left;_x000D_
width: 36px;_x000D_
height: 36px;_x000D_
border: 2px solid #909090;_x000D_
border-radius: 100%;_x000D_
margin-right: 7px; /*space between*/_x000D_
display: flex;_x000D_
align-items: flex-start;_x000D_
transition: all 0.4s;_x000D_
-webkit-transition: all 0.4s;_x000D_
} _x000D_
.social-links a i{_x000D_
font-size: 20px;_x000D_
align-self:center;_x000D_
color: #909090;_x000D_
transition: all 0.4s;_x000D_
-webkit-transition: all 0.4s;_x000D_
margin: 0 auto;_x000D_
}_x000D_
.social-links a i::before{_x000D_
display:inline-block;_x000D_
text-decoration:none;_x000D_
}_x000D_
.social-links a:hover{_x000D_
background: rgba(0,0,0,0.2);_x000D_
}_x000D_
.social-links a:hover i{_x000D_
color:#fff;_x000D_
}
_x000D_
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>_x000D_
_x000D_
<div class="social-links">_x000D_
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>_x000D_
<a href="#"><i class="fa fa-twitter fa-lg"></i></a>_x000D_
<a href="#"><i class="fa fa-google-plus fa-lg"></i></a>_x000D_
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a>_x000D_
</div>
_x000D_
With Font Awesome you can easily use stacked icons like this:
<span class="fa-stack fa-2x">
<i class="fas fa-circle-thin fa-stack-2x"></i>
<i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>
refer Font Awesome Stacked Icons
Update:- Fiddle for stacked icons
This is the best and most precise solution I've found so far.
CSS:
.social .fa {
margin-right: 1rem;
border: 2px #fff solid;
border-radius: 50%;
height: 20px;
width: 20px;
line-height: 20px;
text-align: center;
padding: 0.5rem;
}
Source: Stackoverflow.com