Q:

How to set equal amount of spacing from the font awesome icon or text using css

Actually i don't know what this is called so i rather posted the image, i was going through a website and i saw this that the icon was aligned on the left side and the text was on the right side now i liked the thing that how much ever the big text is it is not going below the icon its breaking the line in its linear position. How to achieve this. Also what is this called?

A:

The solution ( JS Fiddle ) is a combination of position: absolute and using font awesome icons in a CSS pseudo element:
.example {
width: 300px;
margin: 0 auto;
position: relative;
}

.example::before {
content: "\f041";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 32px;
padding-right: 0.5em;
position: absolute;
top: 0;
left: -30px;
}

All the HTML you need is a single element (a div in this example):
<div class="example">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem commodi obcaecati, explicabo culpa iusto quae magni atque officiis nam qui sit inventore suscipit expedita facilis eum quas voluptatum laborum impedit.
</div>

This code is based on astronautweb.co and their list of CSS values for Font Awesome icons.

