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

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

  

    

      

        
        
Call us
      
      


      
      

        

          Click the button to call us