<div class="col-md-4">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x blue"></i>
<i class="fa fa-wifi fa-stack-1x white"></i>
</span>
<h4 class="blue">Free wifi</h4>
</div>
How can I display h4 element on the right of the icon and vertically aligned? Should I float left the span?
One of the ways would be to use inline-block display and middle align it - see demo below:
.wrapper > * {
display: inline-block;
vertical-align: middle;
}
.blue {
color: blue;
}
.white {
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-md-4 wrapper">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x blue"></i>
<i class="fa fa-wifi fa-stack-1x white"></i>
</span>
<h4 class="blue">Free wifi</h4>
</div>
Use CSS Flexbox. Make a parent <div> that wraps icon and text into it (in my case its icon-holder) and make it a flexbox container using display: flex.
Have a look at the snippet below:
.icon-holder {
display: flex; /* Flex Container */
align-items: center; /* Vertically Align Content */
}
.blue {
color: #33b5e5;
}
span {
color: #fff;
}
h4 {
padding-left: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-md-4">
<div class="icon-holder">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x blue"></i>
<i class="fa fa-wifi fa-stack-1x white"></i>
</span>
<h4 class="blue">Free wifi</h4>
</div>
</div>
Hope this helps!
You can use display: flex and can do something like below :
.col-md-4 {
display: flex;
align-items: center;
}
.blue {
color: blue
}
.white {
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-md-4 wrapper">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x blue"></i>
<i class="fa fa-wifi fa-stack-1x white"></i>
</span>
<h4 class="blue">Free wifi</h4>
</div>
Related
I have an element which I would like to crop x% of it from the right, and so the width will automatically decrease by half to fit the new content.
Currently I'm using this:
div{
display:flex;
justify-content: space-evenly;
width:180px;
}
i{
color: yellow;
}
span i{
position:relative;
left: 50%;
}
span{
overflow: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<span>
<i class="fas fa-2x fa-star"></i>
</span>
</div>
But as you can see when using it the span keeps it's original width and doesn't crop
Or using clip-path
so it creates an extra gap between the half star and the solid star before/after it.
I have tried using transform: translateX(-x%); on the container but it sabotages the entire layout and every element positioned after it gets a x% offset.
Is there a way to crop the element and so it's size?
NOTE: the real element size is dynamic. I prefer a pure css solution that doesn't evolve using constants /JS
Thanks
edit, after understanding the question, you may use width + overflow
If it is dynamic and can show up many times, you may use var() to update the value on the fly
examples
Why do i use em for sizing ? - because its size is about its own font-size : here : fa-2x in your question , which em will match even if the class turns to be fa-4x .
div{
display:flex;
justify-content: space-evenly;
width:180px;
margin:1em;
filter:drop-shadow(0 0 3px)
}
i{
color: yellow;
}
div i:last-of-type{
width: var(--size);
overflow:hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div style="--size: calc(1em * 0.3)">
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>30%
</div>
<div style="--size: calc(1em * 0.6)">
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>60%
</div>
<div style="--size: calc(1em * 0.7)">
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>70%
</div>
You may use clip-path, it will allow you to cut off a portion of the element . % can be used .
It also can allow you to cut it off with different shapes .
This will help you create your first clip-path https://bennettfeely.com/clippy/
specification https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
examples
div{
display:flex;
justify-content: space-evenly;
width:180px;
margin:1em;
filter:drop-shadow(0 0 3px)
}
i{
color: yellow;
}
div i:last-of-type{
clip-path: polygon(0 0, 60% 0, 60% 100%, 0% 100%);
}
/*cut half of its surface , but differently*/
[title] i:last-of-type{
clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0% 100%);
}
[class] i:last-of-type{
clip-path: polygon(0 0, 100% 0, 0 100%, 0% 100%);
}
[id] i:last-of-type{
clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>60%
</div>
<div title="2.6">
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>60%
</div>
<div class>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>50%
</div>
<div id >
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>50%
</div>
You should specify the width of each star, which is 36px in this case. Then you can just set the width to 16px for the last star and add overflow hidden.
div{
display:flex;
justify-content: space-evenly;
width:180px;
}
i{
color: yellow;
width: 36px;
}
.half-star {
overflow: hidden;
width: 16px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star half-star"></i>
</div>
You can use the clip property and just for example do that
clip: rect(0px,60px,200px,0px); it should split it in half
Use fa-star-half as an alternative to custom styles. This will ensure dynamicity.
div {
display: flex;
justify-content: space-evenly;
width: 180px;
}
i {
color: yellow;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star-half"></i>
</div>
Solution w/o fa-star-half.
I called your custom span with the customs styles .custom. This solution requires removing justify-content: space-evenly and uses a calculated width on your span's that are not custom.
However, you still want the .custom span to be factored into this width. So you can set something like span:not(.custom) { width: calc(100% / 3); } Then, you will want to set text-align: center; to the non custom spans's also.
div {
display: flex;
width: 180px;
}
i {
color: yellow;
}
span.custom i {
position: relative;
left: 50%;
}
span.custom {
overflow: hidden;
}
span:not(.custom) {
width: calc(100% / 3);
text-align: center;
}
span {
outline: black 1px dotted;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<span>
<i class="fas fa-2x fa-star"></i>
</span>
<span>
<i class="fas fa-2x fa-star"></i>
</span>
<span class="custom">
<i class="fas fa-2x fa-star"></i>
</span>
</div>
If you're looking to make the star half, you could use <i class="fa fa-star-half-o" aria-hidden="true"></i> instead of trying to crop it in half and then fit to the content.
Please let me know if I have misunderstood your question.
EDIT:
I would make a parent container for each star that is responsible for the width and height, and let the child base its width on the preferred percentage.
.star-row {
display: flex;
gap: 5px;
}
i {
color: yellow;
overflow: hidden;
}
.last-star {
width: 50%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div class="star-row">
<div class="star-container">
<i class="fas fa-2x fa-star"></i>
</div>
<div class="star-container">
<i class="fas fa-2x fa-star last-star"></i>
</div>
</div>
I cropped the stars using a span outside (and I replaced the div with span).
span{
display:flex;
justify-content: space-evenly;
overflow: hidden;
width: 95px;
}
i{
color: gold;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<span>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star" style="width:calc(36px / 2);"></i>
</span>
it's simple you just need to use negative for margin element.
margin-right:-18px;
div{
display:flex;
justify-content: space-evenly;
width:180px;
}
i{
color: yellow;
}
span i{
margin-right:-18px;
}
span{
background:red;
overflow: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<span>
<i class="fas fa-2x fa-star"></i>
</span>
</div>
Using clip-path can be a practical solution for this case.
It's not size dependent, and you can use any value between 0-100% for the --percentage variable.
div{
display:flex;
justify-content: space-evenly;
width:180px;
}
i{
color: yellow;
}
i:last-child{
--percentage: 50%;
clip-path: polygon(0 0, var(--percentage) 0, var(--percentage) 100%, 0 100%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
</span>
</div>
If the last star bounding box is a concern, you should be able to achieve that by providing a width like this.
div{
display:flex;
justify-content: space-evenly;
width: 180px;
--star-count: 5;
--star-width: calc(100% / var(--star-count));
--last-star-crop: 1/2;
}
i{
width: var(--star-width);
color: yellow;
}
i:last-child{
width: calc(var(--star-width) * var(--last-star-crop));
overflow: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css">
<div>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
<i class="fas fa-2x fa-star"></i>
</span>
</div>
Note: FontAwesome uses font-size to dictate icon sizing, due to that smaller container widths can cause distortion.
I have this html below where I am using font awesome icons. What I would like is the for text for each icon (in the example below joinery and plumbing to appear below it's relevant font awesome icon). At the moment the text is display to the right of the icon half way up.
<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="icons-text">Joinery</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="icons-text">Plumbing</span>
</div>
.icon-background {
color: #000000;
}
.icons{
text-align:center;
}
.icons-text{
color:#000000;
font-size:10px;
padding:5px 0 10px 0;
text-transform:uppercase;
letter-spacing:1px;
}
I tried including display:block within icon.text and this does add the text below the icon, but what is also does it stack the icons vertically and not keeping them next to each other horizontally.
There are several ways of doing this, depending on exactly what is required. One is to make the spans into divs, then the browser automatically stacks the text below the icon, but to make this icon/text stay on the same line as the next one, wrap each set in a div - I've given it the class 'trade' - and float that.
.icon-background {
color: #000000;
}
.icons{
text-align:center;
}
.icons-text{
color:#000000;
font-size:10px;
padding:5px 0 10px 0;
text-transform:uppercase;
letter-spacing:1px;
}
div.trade {
float:left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" crossorigin="anonymous" />
<div class="icons">
<div class="trade">
<div 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>
</div>
<div class="icons-text">Joinery</div>
</div>
<div class="trade">
<div 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>
</div>
<div class="icons-text">Plumbing</div>
<div>
</div>
There is a cleaner way to do it, if you'd like:
.icons .fa {
display: inline-block;
padding: 0 0 10px;
color: #000;
font-size: 10px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
.icons .fa:before {
display: block;
width: 1.5em; height: 1.5em;
margin: 0 auto 5px;
border: solid .2em; border-radius: 55%;
font-size: 6.4em;
line-height: 1.5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet" />
<div class="icons">
<span class="fa fa-hammer">Joinery</span>
<span class="fa fa-wrench">Plumbing</span>
</div>
I have a few divs that act as lists/buttons on my page.
Each div contains an icon and a text.
I need to keep these 'buttons' in the center of the page but at the same time, I have to align the icons and texts under eachother.
So all the icons are under eachother AND all the texts are under eachother.
This is what I have so far:
code
https://jsfiddle.net/sy21m4dq/
.list{
width:100%;
text-align:center;
}
.list-item{
display:inline-block;
width:250px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="list">
<div class="list-item">
<i class="fa fa-user" aria-hidden="true"></i> Account
</div>
<div class="list-item">
<i class="fa fa-sign-in" aria-hidden="true"></i> Account LOGIN
</div>
<div class="list-item">
<i class="fa fa-star" aria-hidden="true"></i> freedback
</div>
<div class="list-item">
<i class="fa fa-question" aria-hidden="true"></i> Help
</div>
</div>
This is what I am looking to achieve:
could someone please advice on this?
Thanks in advance.
I'd improve your markup structure and leverage a CSS layout option, such as display table, among others.
My suggestion is to have additional layers of markup for the various CSS layout concerns you have / need.
<div class="list">
<div class="list-container">
<div id="list-item">
<div class="list-item-cell"><i class="fa fa-user" aria-hidden="true"></i></div>
<div class="list-item-cell">Account</div>
</div>
<div id="list-item">
<div class="list-item-cell"><i class="fa fa-star" aria-hidden="true"></i></div>
<div class="list-item-cell">freedback</div>
</div>
<div id="list-item">
<div class="list-item-cell"><i class="fa fa-question" aria-hidden="true"></i></div>
<div class="list-item-cell">Help</div>
</div>
<div id="list-item">
<div class="list-item-cell"><i class="fa fa-sign-in" aria-hidden="true"></i></div>
<div class="list-item-cell">Account LOGIN</div>
</div>
</div>
</div>
In this way, you can leverage the type of layout styles you want in a cleaner fashion. Your markup is your skeleton. If you have too few bones, your design will be more limited.
.list{
width:100%;
text-align:center;
}
.list-container {
display: table;
max-width: 400px;
margin: 0 auto;
}
.list-item{
display: table-row;
width:250px;
}
.list-item-cell {
display: table-cell;
}
.list-item-cell:first-child {
padding-right: 10px;
width: 30px;
}
There's a few things going on that I will explain, but the below snippet works.
You had the divs with id="list-item", which was a typo. They needed to be class="list-item".
You had the .list-item as inline-block, but really they should be block, and the container (the .list div) should be set to the 250px width.
A little icing on the cake to make the icons / text really line up was to apply some width to the icons (.list-item .fa).
body{
text-align: center;
}
.list {
display: inline-block;
width: 150px;
}
.list-item {
display: block;
width: auto;
text-align: left;
}
.list-item .fa {
width: 30px;
text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="list">
<div class="list-item">
<i class="fa fa-user" aria-hidden="true"></i> Account
</div>
<div class="list-item">
<i class="fa fa-sign-in" aria-hidden="true"></i> Account LOGIN
</div>
<div class="list-item">
<i class="fa fa-star" aria-hidden="true"></i> freedback
</div>
<div class="list-item">
<i class="fa fa-question" aria-hidden="true"></i> Help
</div>
</div>
Add a fixed width to the icons
i {
width: 20px;
text-align: center;
}
Make the list an inline-flex-container with columns-display
Center the whole box with either text-align-center or flex
https://jsfiddle.net/qw2f3ojt/
I'm generating a rating system using font-awesome fa-heart class. It is working fine by colouring the full heart, but I'm in trouble when trying to fill it in red only the first half of the heart.
I have been searching but always are stars and not a half-heart, always full heart and not from font-awesome.
Font awesome version used 4.0.3 and cannot be changed...
Any trick to do that?
.full {
color:red;
}
.half {
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="rating-love ">
<span class="fa fa-heart full"></span>
<span class="fa fa-heart full"></span>
<span class="fa fa-heart full"></span>
<span class="fa fa-heart full"></span>
<span class="fa fa-heart half"></span>
<span>23 Review(s)</span>
</div>
Here is another idea where you can easily have any kind of rating by simply adjusting a CSS variable:
.rating-love {
display: inline-grid!important;
}
.rating-love:before,
.rating-love:after {
content: "\f004 \f004 \f004 \f004 \f004";
grid-area: 1/1;
}
.rating-love:after {
white-space: nowrap;
overflow: hidden;
width: var(--w);
color: red;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="rating-love fa" style="--w: 50%;"></div>
<br>
<div class="rating-love fa" style="--w: 30%;"></div>
<br>
<div class="rating-love fa" style="--w: 80%;"></div>
This can be done using text Clip & Background Gradient, I hope this trick will work for you too.
I just made a gradient with 2 colors and divided them with clip its looking fine. You can make half of the heart white if you want just by changing the hexcode in css.
.fa-heart.half:before {
background: -webkit-linear-gradient(180deg,#000 0%, #000 50%,#FF0000 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.full {
color:red;
}
.half {
}
.fa-heart.half:before {
background: -webkit-linear-gradient(180deg,#000 0%, #000 50%,#FF0000 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="rating-love ">
<span class="fa fa-heart full"></span>
<span class="fa fa-heart full"></span>
<span class="fa fa-heart full"></span>
<span class="fa fa-heart full"></span>
<span class="fa fa-heart half"></span>
<span>23 Review(s)</span>
</div>
Without using JavaScript you'd cut the width of the span to half, hiding the overflow.
.full {
color: red;
vertical-align:text-bottom;
}
.half {
color: red;
width: 8px;
overflow: hidden;
vertical-align:text-bottom;
margin-right: 8px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="rating-love ">
<span class="fa fa-heart full"></span>
<span class="fa fa-heart full"></span>
<span class="fa fa-heart full"></span>
<span class="fa fa-heart full"></span>
<span class="fa fa-heart half"></span>
<span>23 Review(s)</span>
</div>
#header .head-social {
background-color: #7DC651;
width: 100%;
height: 37.48px;
}
#header .head-social h3 {
color: white;
font-size: 13px;
margin-top: 12px;
font-family: 'Open Sans';
text-align: right;
display: inline-block;
}
.social-links {
display: -webkit-inline-box;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="header">
<div class="head-social">
<div class="container">
<h3>I am a pretty website website, 12345</h3>
<div class="social-links">
<div class="facebook"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></div>
<div class="twitter"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></div>
<div class="youtube"><i class="fa fa-youtube fa-lg" aria-hidden="true"></i></div>
<div class="instagram"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></div>
<div class="google"><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
The text h3 and the fa-classes doesn't seem to align to the right of the div head-social. They are always on the left side of the div.
Try this...
#header .head-social{
background-color: #7DC651;
width:100%;
height: 37.48px;
}
#header .head-social h3 {
color: white;
font-size: 13px;
margin-top: 12px;
font-family: 'Open Sans';
text-align: right;
display: inline-block;
}
.social-links {
display: -webkit-inline-box;
}
#header .head-social {
text-align:right;
} //added this line
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="header">
<div class="head-social">
<div class="container">
<h3>I am a pretty website website, 12345</h3>
<div class="social-links">
<div class="facebook"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></div>
<div class="twitter"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></div>
<div class="youtube"><i class="fa fa-youtube fa-lg" aria-hidden="true"></i></div>
<div class="instagram"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></div>
<div class="google"><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>
Try with it :
1. With align right :
<div id="header">
<div class="head-social">
<div class="container" align="right>
<h3>I am a pretty website website, 12345</h3>
<div class="social-links">
<div class="facebook"></i></div>
<div class="twitter"></i></div>
<div class="youtube"></i></div>
<div class="instagram"></i></div>
<div class="google"></i></div>
</div>
</div>
</div>
</div>
With float right :
.container { float:right; }
use float instead of text-align
set container to float:right in css
i hope it helpful for you
#header .head-social {
background-color: #7DC651;
width: 100%;
height: 37.48px;
}
#header .head-social h3 {
color: white;
font-size: 13px;
margin-top: 12px;
margin-left: 5px;
font-family: 'Open Sans';
display: inline-block;
}
.social-links {
display: -webkit-inline-box;
margin-top: 12px;
margin-left: 5px;
}
.container {
float: right;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="header">
<div class="head-social">
<div class="container">
<h3>I am a pretty website website, 12345</h3>
<div class="social-links">
<div class="facebook"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></div>
<div class="twitter"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></div>
<div class="youtube"><i class="fa fa-youtube fa-lg" aria-hidden="true"></i></div>
<div class="instagram"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></div>
<div class="google"><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></div>
</div>
</div>
</div>
</div>