CODEWITHSUNDEEP
cssiconsfont-awesomefontastic
zyphal
zyphal

Reputation: 79

How can I align my font-awesome icons with my text?

I've been trying to center my text with my Fontastic.me icons.

Here's my code:

HTML:

<html>
 <div id="info">
    <ul>
        <li id="chat"><span class="icon-comment-discussion"></span><p>We offer the best & simplest chat system on the web.</p></li>
</ul>
</div>
</html>

and my CSS:

#chat {
line-height: 72px;
vertical-align: middle;
}

It doesn't line up at all, and nothing changes when I change the vertical-align option. I'm thinking maybe it's because my text is in a paragraph tag; but I wanted to ask here first.

Solved: I added the vertical-align: middle; to:

#chat span {

}

it worked perfectly.

Upvotes: 3

Views: 1288

Answers (1)

Chris Conway
Chris Conway

Reputation: 56

Paragraphs as standard will have margins applied to them, you can try to remove the margin to see if that helps, or place the icon inside the paragraph.

p{ margin:0; }

Upvotes: 0

Related Questions