Align Text Beside FontAwesome Icon
There is a very easy way if your fontawesome has the same font-size than your text (it is usually the good practice), include the tags in the text tags:
<p>
<i class="fa fa-check"></i>
Text text text
</p>
Use the .media class.
<div class="media">
<div class="media-left">
<i class="fa fa-home"></i>
</div>
<div class="media-body">
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
To have complete/independent control on the position of the font-awesome icon, try something like below.
Method 1: Using absolute positioning
Add
position with
aproperty value
ofrelative
to theh3
style to control overlap.Use
:after
selectorcontent
to insert the iconAdd
position with
aproperty value
ofabsolute
to theh3
:after block of CSS codeAchieve the desired position with left, right, top or bottom property values.
Method 2: Using float
(Easier).
Use
:after
selectorcontent
value to insert the iconAchieve the desired position of the icon by floating the
:before
selector to the right or left.
/* Using absolute positoinning */
h3.absolute {
position: relative; /* Helps us control overlap */
padding-left: 25px; /* Creates space for the Phone Icon */
}
h3.absolute:before {
content: '\f095';
font-family: fontAwesome;
position: absolute;
left: 0; /* Adjust as needed */
top: 3px; /* Adjust as needed */
}
/* Using float */
h3.float {
font-size: 24px;
color: red;
}
h3.float:before {
content: '\f095';
font-family: fontAwesome;
float: left; /* Depends on the side we want the icon */
margin-right: 10px; /* Creates space between the icon and the text */
font-size: 24px;
height: 32px;
line-height: 32px; /* Same as the font size */
}
/* Below code is jsut for differentiation of methods */
strong {
font-size: 24px;
text-decoration: underline;
display: block;
width: 100%;
}
strong:last-of-type {
color: red;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<strong>Using absolute Positioning</strong>
<h3 class="absolute">Call us</h3>
<strong>Using float</strong>
<h3 class="float">Call us</h3>
Note: You can adjust the size of the icon with CSS font-size
property value.
Try this :
<i class="fa fa-phone fa-2x" style="vertical-align: middle;"></i>