Vertically align in center a font-awesome icon next to text paragraph

Question

I want to have a font-awesome icon on the left and my text paragraph on the right. The font-awewome icon has to be vertically centered right next to text and all text needs to stay on right side of icon (even when text is longer and may fall underneath icon).

How to accomplish this because I have all the right code I could think of?

Fiddle... Fiddle

HTML:

<div class="modal-body">
<p><i class="fa fa-check-circle"></i> bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
</div>

CSS:

i.fa.fa-check-circle {
    color:#000;
    font-size:80px;
    float:left;
    display:inline-block;
    text-align:center;
}

.modal-body p {
    font-style:LuzSans-Book;
    font-size:30px;
    line-height:1.43em;
}

Answer 1

Try and organize your code like this

HTML

<div class="modal-body">
    <div class="icon"><i class="fa fa-check-circle"></i></div>
    <div class="text">bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>
</div>

CSS

.icon {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid pink;
}

i.fa.fa-check-circle {
    color:#000;
    font-size:80px;
    float:left;
    display:block;
    text-align:center;
    background-color: red;
    width: 32px;
    height: 32px;
}

.text {
    display: table-cell;
    vertical-align: top;
    font-style:LuzSans-Book;
    font-size:30px;
    line-height:1.43em;
    border: 1px solid orange;
}

I updated your Fiddle with this code if you want to see it in action. I added borders so you could see each of the table cell and a background color so that you could see the Awesome Font icon.

If you dont want your Font Awesome Icon in the middle of the left column then you can set the vertical alignment to top . You can read more about table alignment here .

Answer 2

Putting Just

style="padding: 10px" 

Work for me!