Align Text In Bootstrap Well Beside FontAwesome Icon - html

Question

I'm having difficulties aligning my headline and paragraph text in a "well". The "none" you see is a class to remove specific margins and is not relevant to what I'm trying to accomplish.
Here is my code
<div class="col-md-4 none">
<div class="well none">
<i class="fa fa-user fa-4x fa-fw"></i>
<h3>Test</h3>
<p>text goes here</p>
</div>
</div>
Here's what it's doing and what I want it to do.
Thanks for your help!

Answer 1

I would suggest you to make slight change in your html structure and wrap your text content inside the div and set its display as inline-block
<div class="col-md-4 none">
<div class="well none">
<i class="fa fa-user fa-4x fa-fw"></i>
<div class="text">
<h3>Test</h3>
<p>text goes here</p>
</div>
</div>
</div>
and css for that additional div is
.text {
display:inline-block;
}
Js Fiddle Demo

Answer 2

I would do this the following way. I like to use nested rows where ever possible to keep things clean.
/** CSS **/
.well h3 {
margin-top:0px;
}
.fs48 {
font-size:48px;
}
/** HTML **/
<div class='row'>
<div class='col-md-4'>
<div class='well'>
<div class='row'>
<div class='col-xs-3 text-center'>
<span class='glyphicon glyphicon-user fs48'></span>
</div>
<div class='col-xs-9'>
<h3>Test</h3>
<p>text goes here</p>
</div>
</div>
</div>
</div>
</div>
See a working example here : http://jsfiddle.net/D2RLR/6779/
You can simply replace the glyph with the font awesome class.