Bootstrap - Pull Icon to Left of Text

Question

In Bootstrap 3, I want to have an icon centered to the left of an H6 and some text.

Here's my code:

<div class="row">
    <div class="col-sm-8">
         <div class="pull-left"><i class="fa fa-life-ring fa-3x"></i></div>
         <div class="pull-right">
         <h6>Unlimited Support</h6>
         We're here to help! Just ask away...
         </div>
    </div>
</div>

It looks like this right now (icon is above the text, rather than on the left):

How do I get it to format correctly?

This code:

<div class="row">
    <div class="col-sm-8">
         <div class="pull-right">
             <h6><i class="fa fa-life-ring fa-3x"></i> Unlimited Support</h6>
             We're here to help! Just ask away...
         </div>
    </div>
</div>

Displays like this:

But, I want to put the icon beside both lines of text (have the "We're here..." move to the right/not wrap underneath.

Answer 1

you can try this

jsFiddle Demo

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>