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 wit

Answer 1

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;
  }

Using absolute Positioning
Call us

Using float
Call us

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