Space between link and icon, fontawesome

html css font-awesome
Joe picture Joe · Jan 15, 2015 · Viewed 87.7k times · Source

What's the best way to get a space between the link/paragraph and the icon?

Doesn't work to just put a space before the text because it will be changed back when you minify/uglify the project.

I tried with all kinds of padding and margins. Can't get them to separate.

Answer

Christina picture Christina · Jan 15, 2015

I would use the .fa-fw class. For example: <i class="fa fa-cog fa-fw"> This adds a visual space (that won't get stripped out) and it's consistent, so when/if the elements stack it looks a lot better.

Instructions: http://fortawesome.github.io/Font-Awesome/examples/enter image description here

Related questions

Font Awesome not working, icons showing as squares

So I'm trying to prototype a marketing page and I'm using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square. …

Read More
Add image in title bar

How do I add image in title bar? I have title- "Webnet" Merging it with a FontAwesome Glyphicon's icon images as- <title><i class="icon-user icon-black"></i>Webnet</title> And I tried …

Read More
Use Font Awesome icon as CSS content

I want to use a Font Awesome icon as CSS content, i.e., a:before { content: "<i class='fa...'>...</i>"; } I know I cannot use HTML code in content, so is it only images left?

Read More