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;
}
Related
I am trying to design a nav-bar using flex-box, with bootstrap 4. I have three div and whenever the browser shrinks, the div's header__center and header__right are coming one another line. But I wanted to make them remain in the same line, no matter how small the size of the device.
Now when the device width is 576 to 614 i am getting this problem:
And when the device size is extra small that is <314, there is this problem
* {
margin: 0;
padding: 0;
}
nav.navbar {
align-content: center;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
padding: 0px 20px;
/* REMOVED TOP PADDING */
}
.fas .fa-search {
color: #65676b;
}
.header__left>img {
height: 40px;
}
.header__left {
display: flex;
align-items: center;
}
.header__input {
display: flex;
align-items: center;
background-color: #eff2f5;
padding: 10px;
margin-left: 10px;
border-radius: 999px;
}
.header__input>input {
border: none;
background-color: transparent;
outline-width: 0;
padding-left: 10px;
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
/*modified css */
.header__center__option {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding-left: 10px;
margin-bottom: 0;
height: 60px;
}
.header__center__item {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: 400;
padding: 0 2vw;
height: 60px;
margin-right: 8px;
box-shadow: inset 0 3px #f8f9fa, inset 0 -3px #f8f9fa;
}
.header__center__item.active,
.header__center__item.active:hover {
color: #1877f2;
/* border-bottom: 1px solid #1877f2;
border-bottom-width: 3px; */
background-color: #f8f9fa;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.header__center__item:hover {
background-color: #e9ebef;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.header_option-link {
flex-direction: column;
height: 52px;
display: flex;
text-decoration: none;
justify-content: center;
color: gray;
}
.header__center__item.active>.header_option-link {
color: #1877f2;
}
.header_option-link:hover {
color: gray;
}
.header__center__item.active {
color: #1877f2;
border-bottom: 1px solid #1877f2;
border-bottom-width: 3px;
background-color: #f8f9fa;
border-top-right-radius: 1px;
border-top-left-radius: 1px;
right: 2px;
left: 2px;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
margin-right: 8px;
border-bottom-left-radius: 18px;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
border-top-left-radius: 18px;
padding-left: 12px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.header__info__name {
font-size: 0.9375rem;
font-weight: 600;
color: #050505;
margin-top: -4px;
margin-bottom: -4px;
line-height: 1.3333;
}
.header__right {
display: flex;
}
.header__info>span {
margin-left: 10px;
}
.header__items {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
cursor: pointer;
width: 40px;
height: 40px;
background-color: #e4e6eb;
border-radius: 50%;
transition: background-color 0.2s ease-in-out;
transition-timing-function: cubic-bezier(0, 0, 1, 1);
}
.header__info img {
width: 28px;
height: 28px;
border-radius: 50%;
margin-left: -8px;
}
.header__info:hover {
background-color: #e4e6eb;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light py-xl-0 py-md-0 py-sm-0 py-2">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
<div class="header__input">
<i class="fas fa-search"></i>
<input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
</div>
</div>
<div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
<ul class="header__center__option">
<li class="header__center__item active">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-plane fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bed fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bus-alt fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-umbrella-beach fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-spa fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
</ul>
</div>
<div class="header__right">
<div class="header__info">
<img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
<span class="header__info__name">User</span>
</div>
<div class="header__items">
<i class="fas fa-envelope-open-text"></i>
</div>
</div>
</nav>
How to make those icons not to come in another line and be responsive to whatever the size the device width is decreased? Any help would be appreciated!
I am thinking to use the media query but stuck on the idea to start on what should be the approach or the techniques to make on that same line.
Remove padding-left: 10px on class header__center__option.
Remove all the class fa-lg on your icons.
Adding below stuff if you want to make it scrollable.
nav.navbar{
...
flex-wrap: nowrap;
overflow: auto;
}
https://jsfiddle.net/290478rf/1/
You just need to move header__left, header__center__option and header__right to one parent.
Change
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
<div class="header__input">
<i class="fas fa-search"></i>
<input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
</div>
</div>
<div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
<ul class="header__center__option">
<li class="header__center__item active">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-plane fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bed fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bus-alt fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-umbrella-beach fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-spa fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
</ul>
</div>
<div class="header__right">
<div class="header__info">
<img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
<span class="header__info__name">User</span>
</div>
</div>
to
<div>
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
<div class="header__input">
<i class="fas fa-search"></i>
<input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
</div>
</div>
<div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
<ul class="header__center__option">
<li class="header__center__item active">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-plane fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bed fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bus-alt fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-umbrella-beach fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-spa fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
</ul>
</div>
<div class="header__right">
<div class="header__info">
<img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
<span class="header__info__name">User</span>
</div>
</div>
</div>
Now hide and show header__center__item on respective breakpoints. This will fix both of your problems.
* {
margin: 0;
padding: 0;
}
nav.navbar {
align-content: center;
position: sticky;
background-color: white;
z-index: 100;
top: 0;
box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 75);
padding: 0px 20px;
overflow: hidden;
/* REMOVED TOP PADDING */
}
.fas .fa-search {
color: #65676b;
}
.header__left>img {
height: 40px;
}
.header__left {
display: flex;
align-items: center;
}
.header__input {
display: flex;
align-items: center;
background-color: #eff2f5;
padding: 10px;
margin-left: 10px;
border-radius: 999px;
}
.header__input>input {
border: none;
background-color: transparent;
outline-width: 0;
padding-left: 10px;
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
/*modified css */
.header__center__option {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding-left: 10px;
margin-bottom: 0;
height: 60px;
}
.header__center__item {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: 400;
padding: 0 2vw;
height: 60px;
margin-right: 8px;
box-shadow: inset 0 3px #f8f9fa, inset 0 -3px #f8f9fa;
}
.header__center__item.active,
.header__center__item.active:hover {
color: #1877f2;
/* border-bottom: 1px solid #1877f2;
border-bottom-width: 3px; */
background-color: #f8f9fa;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.header__center__item:hover {
background-color: #e9ebef;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.header_option-link {
flex-direction: column;
height: 52px;
display: flex;
text-decoration: none;
justify-content: center;
color: gray;
}
.header__center__item.active>.header_option-link {
color: #1877f2;
}
.header_option-link:hover {
color: gray;
}
.header__center__item.active {
color: #1877f2;
border-bottom: 1px solid #1877f2;
border-bottom-width: 3px;
background-color: #f8f9fa;
border-top-right-radius: 1px;
border-top-left-radius: 1px;
right: 2px;
left: 2px;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
margin-right: 8px;
border-bottom-left-radius: 18px;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
border-top-left-radius: 18px;
padding-left: 12px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
}
.header__info__name {
font-size: 0.9375rem;
font-weight: 600;
color: #050505;
margin-top: -4px;
margin-bottom: -4px;
line-height: 1.3333;
}
.header__right {
display: flex;
}
.header__info>span {
margin-left: 10px;
}
.header__items {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
cursor: pointer;
width: 40px;
height: 40px;
background-color: #e4e6eb;
border-radius: 50%;
transition: background-color 0.2s ease-in-out;
transition-timing-function: cubic-bezier(0, 0, 1, 1);
}
.header__info img {
width: 28px;
height: 28px;
border-radius: 50%;
margin-left: -8px;
}
.header__info:hover {
background-color: #e4e6eb;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light py-xl-0 py-md-0 py-sm-0 py-2">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
<div class="header__input">
<i class="fas fa-search"></i>
<input class="d-none d-xl-flex" placeholder="Search Facebook" type="text" />
</div>
</div>
<div class="header__center d-none d-xl-flex d-md-flex d-sm-flex">
<ul class="header__center__option">
<li class="header__center__item active">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-plane fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bed fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-bus-alt fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-umbrella-beach fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
<li class="header__center__item">
<a class="header_option-link text-decoration-none" href="#">
<i class="fas fa-spa fa-lg"></i>
</a>
<div class="header__option-line"></div>
</li>
</ul>
</div>
<div class="header__right">
<div class="header__info">
<img src="https://www.clipartkey.com/mpngs/m/118-1188761_avatar-cartoon-profile-picture-png.png"></img>
<span class="header__info__name">User</span>
</div>
<div class="header__items">
<i class="fas fa-envelope-open-text"></i>
</div>
</div>
</nav>
I am working on a simple pivot data from a table and trying to display the data in a horizontal list. I want to make the design as responsive to show also in mobile. Below is my simple css code
.menu{
width:700px; margin:0 auto;
}
.menu li{
display: inline;
list-style: none;
float: left;
margin-right: 2em;
padding: 0;
text-align:center;
}
.menu .fa {
display: block;
}
.selected {
color: green;
}
.menu li:hover{
color: green;
}
.list-heading {
font-weight: normal;
}
<h3 class="list-heading">WeekName</h3>
<h3 class="list-heading">DayName</h3>
<ul class="menu">
<li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 6</span></li>
<li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 5</span></li>
<li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 4</span></li>
<li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 3</span></li>
<li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 2</span></li>
<li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 1</span></li>
</ul>
I want to display the data like this Image:
There's lots of ways to accomplish this. Personally I'd probably use flex but if you want to stick with an unordered list element you can just set the li children to display: inline-block and allow the DOM flow to do what it's supposed to do like shown below;
Side NOTE: the <!-- --> between the li elements is one way to negate the spacing that an inline-block element has by default without needing to add negative margins etc.
Hope this helps, cheers.
.menu{
margin:0 auto;
list-style: none;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
.menu li{
display: inline-block;
padding: 0;
text-align: center;
width: 120px;
border: gray 1px solid;
padding: .5em;
}
.menu .fa {
display: block;
margin: 0 auto;
margin: .5em 0;
}
.selected {
color: green;
}
.menu li:hover{
color: green;
}
.list-heading {
font-weight: normal;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h3 class="list-heading">WeekName</h3>
<h3 class="list-heading">DayName</h3>
<ul class="menu">
<li><i class="fa fa-cutlery fa-1x"></i><span>Meal 6</span></li><!--
--><li><i class="fa fa-glass fa-1x"></i><span>Meal 5</span></li><!--
--><li><i class="fa fa-cutlery fa-1x"></i><span>Meal 4</span></li><!--
--><li><i class="fa fa-glass fa-1x"></i><span>Meal 3</span></li><!--
--><li><i class="fa fa-cutlery fa-1x"></i><span>Meal 2</span></li><!--
--><li><i class="fa fa-glass fa-1x"></i><span>Meal 1</span></li>
</ul>
Replace with this css
body{
margin: 0px;
padding: 0px;
background: #ccc;
}
.menu{
display: flex;
flex-wrap: wrap;
padding:0px;
}
.menu li{
display: flex;
flex-direction: column;
width: 30vw;
height: 30vh;
justify-content: center;
align-items: center;
background: #fff;
margin: 6px auto;
}
.menu li i{
font-size:24px;
width:60px;
height:60px;
line-height:60px;
text-align:center;
border:1px solid #ccc;
border-radius:50%;
margin-bottom:12px;
cursor:pointer;
}
Html Goes here ....
<ul class="menu">
<li><i class="fas fa-plus"></i><span>Meal 6</span></li>
<li><i class="fas fa-plus"></i><span>Meal 6</span></li>
<li><i class="fas fa-plus"></i><span>Meal 6</span></li>
<li><i class="fas fa-plus"></i><span>Meal 6</span></li>
<li><i class="fas fa-plus"></i><span>Meal 6</span></li>
<li><i class="fas fa-plus"></i><span>Meal 6</span></li>
</ul>
You can achieve this with a CSS media query. You'll need to define the width desired for when they change the stack order. I've set it to 480px. See my fiddle example below.
.menu{
width:700px; margin:0 auto;
}
.menu li{
display: inline;
list-style: none;
float: left;
margin-right: 2em;
padding: 0;
text-align:center;
}
.menu .fa {
display: block;
}
.selected {
color: green;
}
.menu li:hover{
color: green;
}
.list-heading {
font-weight: normal;
}
#media screen and (max-width: 480px) {
.menu li {
margin: 0;
width: 30%;
}
}
<h3 class="list-heading">WeekName</h3>
<h3 class="list-heading">DayName</h3>
<ul class="menu">
<li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 6</span></li>
<li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 5</span></li>
<li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 4</span></li>
<li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 3</span></li>
<li><i class="fa fa-cutlery fa-1x" aria-hidden="false"></i><span>Meal 2</span></li>
<li><i class="fa fa-glass fa-1x" aria-hidden="false"></i><span>Meal 1</span></li>
</ul>
https://jsfiddle.net/mbc59e38/
you can use flex to layout easier. It all depends on your needs and html structure so sometimes you need to use with media queries. But try with flex first
.menu{
max-width:700px; margin:0 auto;
}
.menu li{
display: flex;
list-style: none;
flex-wrap: wrap;
margin-right: 2em;
padding: 0;
text-align:center;
}
.menu .fa {
display: block;
}
.selected {
color: green;
}
.menu li:hover{
color: green;
}
.list-heading {
font-weight: normal;
}
I am trying to round font-awesome icon. Please refer - http://jsfiddle.net/JfGVE/1704/
The problem is, not matter what, the rounded icon is more oval. Not able to make it a perfectly rounded. Below is the css code i have -
i {
display: inline-block;
background: gray;
color: white;
border-radius: 50%;
padding: 5px;
}
It's preferable to avoid setting fixed width and height in pixels. Here's a sollution using an extra div with after pseudo element to draw the circle, see DEMO
HTML:
<div class="container">
<i class="fa fa-close"></i>
</div>
CSS:
.container {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #555;
min-width: 2em;
border-radius: 50%;
vertical-align: middle;
}
.container:after {
content:'';
float: left;
width: auto;
padding-bottom: 100%;
}
Try to adjust height/width and reset line-height:
i {
display: inline-block;
background: gray;
color: white;
border-radius: 50%;
padding: 0.3em; /* adjust padding */
line-height: initial !important; /* reset line-height */
height: 1em;
width: 1em;
text-align:center;
}
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<i class="fa fa-close"></i>
<br>
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-close fa-3x"></i> fa-3x
<i class="fa fa-info fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
[Edit] the icon size is not equal height/width.
So I changed the answer and added height: 1em; width: 1em; text-align: center;
Just use this:
<i class="fa fa-times-circle"></i>
or if you want you can try this too:
i.custom {
display: inline-block;
background: gray;
color: white;
border-radius: 50%;
}
i.custom:before,
i.custom:after {
display: inline-block;
vertical-align: middle;
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<i class="custom fa fa-close"></i>
<i class="fa fa-times-circle"></i>
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;
}