Icon on left of Bootstrap alert

There is now a cleaner (and better best practices imo) way to do this. (Updated jsfiddle from OP)

.alert {
    display: flex;
    flex-direction: row;
}

.alert .glyphicon {
    margin-right: 8px;
    align-self: center; // if you want it centered vertically
}

Virtually all browsers support flex box now. https://caniuse.com/#feat=flexbox

As an aside, bootstrap 4 no longer does glyphicons natively (though there's nothing stopping you from including the glyphicons library manually--or more commonly nowadays, fontawesome), but it does include display classes natively. You can do all this without any CSS. Bootstrap 4 jsfiddle

<div class="container">
  <div class="card bg-light mt-4">
    <div class="card-header">
      <h3>
        Bootstrap 4
      </h3>
    </div>
    <div class="card-body">
      <div class="alert alert-warning d-flex flex-row">
        <i class="fas fa-fw fa-exclamation-circle mr-3 align-self-center"></i>
        <div>
          My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!
        </div>
      </div>
      <div class="alert alert-info d-flex flex-row">
        <i class="fas fa-fw fa-info-circle mr-3 mt-1"></i>
        <div>
          My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines! My message here. Lots of text for several lines!
        </div>
      </div>
    </div>
  </div>
</div>

To not center the icon vertically, simply remove the icons' align-self-center class. You might need to fiddle with the top margin to align it well with the text using the mt-* classes. mt-1 worked well for this example.

Should be pretty straightforward with Bootstrap 4:

<div class="alert alert-warning">
    <div class="row"> <!-- add no-gutters to make it narrower -->
        <div class="col-auto align-self-start"> <!-- or align-self-center -->
            <div class="glyphicon glyphicon-exclamation-sign"></div>
        </div>
        <div class="col">
            My message here. Lots of text for several lines!
            My message here. Lots of text for several lines!
            My message here. Lots of text for several lines!
            My message here. Lots of text for several lines!
        </div>
    </div>
</div>

No custom CSS necessary. :)

Try adding this to your CSS (you may need to be more specific than this)

.alert .glyphicon{
    display:table-cell;
}

.alert div,
.alert span{
    padding-left: 5px;
    display:table-cell;
}

See Updated Fiddle