Align Text Beside FontAwesome Icon

Question

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

and here an image of what it currently looks like

<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 1

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>

Answer 2

Try this :

<i class="fa fa-phone fa-2x" style="vertical-align: middle;"></i>

Answer 3

For posterity, if you are willing to go with CSS flexbox, aligning icons besides text is trivial.

I've kept Bootstrap and its Panel as part of the solution in the spirit of answering the original question.

The key points to note here are:

• display: flex to make direct children flow in the default direction (row)
• align-items: center to align along the flex direction (vertical align in this case)
• flex: 1 to get the middle section to expand as much as possible, pushing the two sides apart

.banner {
  display: flex;
  align-items: center;
}

.banner-start h3 {
  display: inline-block;
}

.banner-start i {
  padding: 0 6px;
}

.banner-middle {
  flex: 1;
}

<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="panel panel-default">
  <div class="panel-body">
    <div class="banner">
      <div class="banner-start">
        <i class="fa fa-phone fa-2x"></i>
        <h3>Call us</h3>
      </div>
      <div class="banner-middle">

      </div>
      <div class="banner-end">
        <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 4

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

Method 1: Using absolute positioning

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

2. Use :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.

Method 2: Using float(Easier).

1. Use :after selector content value to insert the icon

2. Achieve 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.

Answer 5

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>

Answer 6

Sometimes you might need to add position to item. If both elements are on the same column or div and Picture/Icon is larger than something like this should work.

.position-fix { position: sticky; top: 50%; }