HTML
<div>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-comments"></i>
<i class="fa fa-users"></i>
<div>
CSS
.fa {
padding: 5px;
font-size: 30px;
height: 50px;
width: 50px;
line-height:40px;
text-align:center;
position:relative;
float:right;
vertical-align:bottom;
}
.fa a {
display:block;
}
As it can be seen that these icons are horizontally aligned but i need a vertical icon bar,so is there anything i forgot to add.I'm also attaching a screenshot below. Thanks in advance for solution :)
Simply remove float and correct your last selector :
.fa {
padding: 5px;
font-size: 30px;
height: 50px;
width: 50px;
line-height: 40px;
text-align: center;
position: relative;
vertical-align: bottom;
background: blue;
border-bottom:1px solid red; /*not needed, simply to show blocks*/
}
a .fa {
display: block;
}
<div>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-comments"></i>
<i class="fa fa-users"></i>
<div>
I changed .fa class properties
.fa {
padding: 5px;
font-size: 30px;
height: 50px;
width: 50px;
line-height:50px;
text-align:center;
}
Also right code a .fa not .fa a
a .fa {
display:block;
}
a {text-decoration: none;}
Try this way (its' working...):-
<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>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-comments"></i>
<i class="fa fa-users"></i>
<div>
div {
width:50px;
height:300px;
float:right;
}
a {
padding: 5px;
font-size: 30px;
height: 50px;
width: 50px;
line-height:40px;
}
In image their are border that overlapped with my social icon i can't fix that
See in the pic
Border are come in background of social icons
This is my HTML
<div class="social text-center">
<p class="icons">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</p>
<div class="divider">
</div>
This is css
.social {
position: relative;
}
.divider {
position: absolute;
border-top: 2px solid #fff;
width: 100%;
top: 50%;
}
Please solve this problem.
Thanks in advance :)
it's very simple if you use pseudo elements
check the snippet
.social {
overflow: hidden;
background: #333;
padding: 10px 5px;
text-align: center;
}
.icons {
position: relative;
display: inline-block;
vertical-align: top;
padding: 0 10px; /* you can use this padding for the space between icons and border */
}
.icons:before {
content: '';
position: absolute;
top: 50%;
right: 100%;
width: 9999px;
height: 1px;
background: #fff;
}
.icons:after {
content: '';
position: absolute;
top: 50%;
left: 100%;
width: 9999px;
height: 1px;
background: #fff;
}
<div class="social text-center">
<div class="icons">
<i class="fa fa-facebook" aria-hidden="true">123</i>
<i class="fa fa-google-plus" aria-hidden="true">123</i>
<i class="fa fa-youtube" aria-hidden="true">123</i>
<i class="fa fa-twitter" aria-hidden="true">123</i>
<i class="fa fa-instagram" aria-hidden="true">123</i>
</div>
</div>
<!-- remove "123" from icon -->
I am not sure where you want to put divider but following css will put at bottom.
.social {
position: relative;
}
.divider {
position: relative;
border-top: 2px solid #fff;
width: 100%;
}
.social {
width: 100%;
text-align: center;
}
.social h6 {
text-align: center;
font-size: 16px;
color: #a5a5a5;
font-weight: 300;
margin: 15px 0px;
display: inline-block;
position: relative;
}
.social h6:after,
.social h6:before {
content: '';
position: absolute;
width: 130px;
height: 1px;
display: block;
background-color: #a5a5a5;
}
.social h6:after {
right: 95px;
top: 12px;
}
.social h6:before {
left: 95px;
top: 12px;
}
<div class="social">
<h6>Follow Us</h6>
</div>
I have the following snippet to render an icon overlapped with another. The whole div is a link. Currently I'm using position:absolute and adjusting the overlap. How can I do it without the absolute position. I also want the whole div on the right side of the screen (currently its on the left).
.btn-circle {
position: absolute;
top: 4px;
left: 25px;
width: 30px;
height: 30px;
line-height: 30px;
background: red;
border-radius: 50%;l
}
.count {
position: absolute;
top:8px;
left:38px;
font-size:16px;
font-weight: bold;
color:white;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="">
<a href="#">
<i class="fa fa-inbox fa-2x"></i>
<span id="red-circle" class="btn btn-circle"></span>
<span id="toDosCount" class="count">9</span>
</a>
</div>
You can still use absolute positioning alongside float: right if you make the containing div have position: relative
This makes the absolute positions of the inner spans relative to the div rather than the page.
A few tweaks to the top and right/left values and:
.btn-circle {
position: absolute;
top: -4px;
right: -4px;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
.count {
position: absolute;
top: -4px;
right: -1px;
font-size:16px;
font-weight: bold;
color:white;
padding: 2px;
}
.wrapper {
float: right;
position: relative;
margin-right: 100px;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="wrapper">
<a href="#">
<i class="fa fa-inbox fa-2x"></i>
<span id="red-circle" class="btn btn-circle"></span>
<span id="toDosCount" class="count">9</span>
</a>
</div>
I also nudged the whole thing to the left a little so it wasn't obscured by the snippet FULL PAGE
Either you need to position it correctly or reduce the font size:
Snippet
.btn-circle {
position: absolute;
top: -15px;
right: 0;
width: 15px;
height: 15px;
line-height: 15px;
background: red;
border-radius: 50%;
}
div a {position: relative;}
.count {
position: absolute;
top: -15px;
right: 5px;
font-size: 10px;
font-weight: bold;
color: white;
text-align: center;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="">
<a href="#">
<i class="fa fa-inbox fa-2x"></i>
<span id="red-circle" class="btn btn-circle"></span>
<span id="toDosCount" class="count">9</span>
</a>
</div>
Does this work for you?
I want to have a headline on the left side and buttons on the right side. Between I want a line.
.container {
background-image: url(http://www.deutsches-museum.de/fileadmin/Content/010_DM/020_Ausstellungen/100_Museumsinsel/030_Turm/030_Kunst/bild32.jpg);
height: 100px;
color: #fff;
}
.col-xs-8 {
border: 1px solid blue;
}
ul {
display: flex;
text-align: justify;
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
overflow: hidden;
white-space: nowrap;
}
li:first-child {
padding-right: 10px;
}
li:last-child {
padding-left: 10px;
font-size: 10px;
}
h2 {
margin: 10px 0 0 0;
font-size: 20px;
font-weight: normal;
}
.fa-stack-1x {
color: #777;
}
.line {
margin: 0 auto 5px;
border-bottom: 2px solid red;
width: 100%;
}
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="breadcrump">
<ul class="menu">
<li>
<h2>Here is a example Headline</h2>
</li>
<li class="line"></li>
<li>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa fa-chevron-left fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa fa-chevron-right fa-stack-1x"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
With justify the line overlays the Headline and the buttons and this is not what I want.
http://codepen.io/daluela/pen/aOVmGw
If I understand what you want, all you need to do is replace width:100% in .line with flex:1;.
Remove overflow:hidden from your list items.
http://codepen.io/anon/pen/gpXgRW
ul li {
overflow: hidden;/*remove this*/
white-space: nowrap;
}
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?
With Font Awesome you can easily use stacked icons like this:
UPDATE: Font Awesome v6.2.1
<span class="fa-stack fa-2x">
<i class="fa-thin fa-circle fa-stack-2x"></i>
<i class="fa-solid fa-lock fa-stack-1x fa-inverse"></i>
</span>
UPDATE: Font Awesome v5.15.4
<span class="fa-stack fa-2x">
<i class="fal fa-circle 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
i.fa {
display: inline-block;
border-radius: 60px;
box-shadow: 0 0 2px #888;
padding: 0.5em 0.6em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>
JsFiddle of old answer: http://fiddle.jshell.net/4LqeN/
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:)
Font icon in a circle using em as the base measurement
if 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 */
}
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">
<i class="fa fa-facebook fa-lg"></i>
<i class="fa fa-twitter fa-lg"></i>
<i class="fa fa-google-plus fa-lg"></i>
<i class="fa fa-pinterest fa-lg"></i>
</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;
}
NOTE: Don't use this anymore. Use flexbox.
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 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;
}
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{
text-align:center;
float: left;
width: 36px;
height: 36px;
border: 2px solid #909090;
border-radius: 100%;
margin-right: 7px; /*space between*/
display: flex;
align-items: flex-start;
transition: all 0.4s;
-webkit-transition: all 0.4s;
}
.social-links a i{
font-size: 20px;
align-self:center;
color: #909090;
transition: all 0.4s;
-webkit-transition: all 0.4s;
margin: 0 auto;
}
.social-links a i::before{
display:inline-block;
text-decoration:none;
}
.social-links a:hover{
background: rgba(0,0,0,0.2);
}
.social-links a:hover i{
color:#fff;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="social-links">
<i class="fa fa-facebook fa-lg"></i>
<i class="fa fa-twitter fa-lg"></i>
<i class="fa fa-google-plus fa-lg"></i>
<i class="fa fa-pinterest fa-lg"></i>
</div>
The below example didnt quite work for me,this is the version that i made work!
HTML:
<div class="social-links">
<i class="fa fa-facebook fa-lg"></i>
<i class="fa fa-twitter fa-lg"></i>
<i class="fa fa-google-plus fa-lg"></i>
<i class="fa fa-pinterest fa-lg"></i>
</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;
}
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;
}
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;
}
<i class="fa fa-facebook fa-lg"></i>
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;}
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;
}
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;
}