Align text next to FontAwesome symbol

Question

Hi, I am having trouble trying to align text next to the font icon. I tried a few things, but none of them seem to work, I'm trying to make a panel with a button on one side that you can click, and it will call a number with a terrific icon and text on the other side of the panel (I use bootstrap v3. 3.2 to create it)

Here is the image I'm trying to make

and here is 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

To have full / independent control over the position, look and size of the font icon, try something like below.

• Add position with a property value from relative to the h3 style to control the overlap.

• Use :after content selector to insert icon

• Add position with a property value from absolute to h3 : after block of CSS code

• Reach the desired position using the property values ​​on the left, right, top or bottom.

 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 using the CSS font-size property value.

Answer 2

There is a very simple way if your font font has the same font size as your text (this is usually good practice), including tags in text tags:

 <p> <i class="fa fa-check"></i> Text text text </p> 

Answer 3

Try the following:

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

Answer 4

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 5

For posterity, if you want to go with CSS flexbox, aligning icons except text is trivial.

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

The key points here are:

• display: flex to direct children flow in the default direction (string)
• align-items: center to align along the bending direction (in this case, vertical alignment)
• flex: 1 so that the middle section expands as much as possible by pushing the two sides.

 .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 6

Sometimes you may need to add a position to an element. If both elements are in the same column or div element and the value of Picture / Icon is greater than this should work.

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