reece.78 reece.78 - 1 month ago 16
CSS Question

Align Text Beside FontAwesome Icon

Hi I'm having trouble trying to align text beside a font awesome icon I've tried a few things but non of them seem to be working what i'm trying to do is make a panel with a button on one side that you can click and it calls the number with the fontawesome icon and text on the other side of the panel (I'm using bootstrap v3.3.2 to build it)

Here an image I've what I'm trying to do
http://i.imgur.com/0yCsdyG.jpg

and here an image of what it currently looks like
http://i.imgur.com/UpMj6eJ.jpg



<div class="panel panel-default">
<div class="panel-body">
<div class="col-lg-8">
<i class="fa fa-phone fa-2x" style="align: middle;"></i>
<h3>Call us</h3>
</div>
<div class="col-lg-4 text-center">
<div class="btn-group btn-group-justified" style="align: middle;" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" <a href="tel:">Click the button to call us</a>
</button>
</div>
</div>
</div>
</div>
</div>




Answer

To have complete/independent control on the position, look, and size of the font-awesome icon, try something like below.

  1. Add position with a property value of relative to the h3 style to control overlap.

  2. User :after selector content to insert the icon

  3. Add position with a property value of absolute to the h3 :after block of CSS code

  4. Achieve the desired position with left, right, top or bottom property values.

h3 {
  position: relative; /* Helps us control overlap */
  padding-left: 25px; /* Creates space for the Phone Icon */
  }

h3:after {
  content: '\f095';
  font-family: fontAwesome;
  position: absolute;
  left: 0; /* Adjust as needed */
  top: 3px; /* Adjust as needed */
  }
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<h3>Call us</h3>

Note: You can adjust the size of the icon with CSS font-size property value.