64

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

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>

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.

Weafs.py
  • 22,731
  • 9
  • 56
  • 78
Joe
  • 4,274
  • 32
  • 95
  • 175

10 Answers10

129

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: https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons enter image description here

Sufian
  • 6,405
  • 16
  • 66
  • 120
Christina
  • 34,296
  • 17
  • 83
  • 119
  • It's a good solution in most of the cases, but be aware that it doesn't put the same amount of space between the icon and the text always. E.g. if you use a wide icon like "snowplow". As the same says it really only fixes the icon width, it does not put a specific amount of space between the icon and the following element: https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons For that you should use a CSS class/style like "mx-3" or "mr-3" from Bootstrap. – coeing Jun 19 '20 at 11:04
24

Don't know if is the best but you can add some margin-right to the i element:

i {
  margin-right: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>
user2019037
  • 764
  • 1
  • 7
  • 14
20

Old question but I didn't liked any of these answers so I did it this way:

 <i class="fa fa-cloud"></i> <span class="ml-1">Resume</span>

I kinda hate CSS or dirty html and I prefer working only with classes but fa-fw isn't useful with some icons. Not sure if span is the way to go but it looks good in my project.

So you can just wrap your text around something and give it a margin in which direction you want.

Eduard
  • 732
  • 1
  • 7
  • 20
  • 2
    Perfect! This is the best in my opinion. Nice visually and neatly integrated with Bootstrap. – caram Dec 13 '19 at 14:24
11

I guess i is display: inline so you'll have to set its display to inline-block for margin-right to work :

i {
  display: inline-block;
  margin-right: 1em;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>
sodawillow
  • 12,497
  • 4
  • 34
  • 44
8

There are 2 spaces you need to add to make the UI look good. First, before the icon and a little space in between the icon and the text field.

So for the first case you need to add a font awesome class

fa-fw

class. for the second case, we just need a Non-Breaking Space.

&nbsp

This way you will not need an extra class to be added.

Below is a sample code to explain this. 

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>
Harshit Pant
  • 1,032
  • 11
  • 14
5

Since I just came across the same question I took a closer look at Christina's suggestion from the font-awesome example page (sorry, I'm not allowed to just comment yet).

<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

The most distance here is gained by &nbsp; (see screen 1) rather than from fa-fw see screen 2 since this is just unifying the width of the font-icon itself, so for a nicer look you may want to go for both.

&nbsp; (which will be interpreted as a space then) also should not make any troubles while minifying based on some quick tests.

Christoph Farnleitner
  • 171
  • 1
  • 10
2

Just use this:

a > i{
  padding-right:10px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply  "></i>Change</a>
Rafiqul Islam
  • 931
  • 11
  • 14
1

<i class="fa fa-cloud mr-2"></i>

This integrates Bootstrap as well as does not require for any extra tags!

Jason Saldaña
  • 29
  • 3
0

None of the answers here worked for me. I had to do this:

<i class="fa fa-reply"><span>Change</span></i>

i span {
  display: inline-block;
  margin-left: 0.3rem;
}
Vijayanand Settin
  • 826
  • 11
  • 13
-1
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply" style="padding-right:5px"></i>Change</a>

you can do inner css after -class="fa fa-reply"- put -style="padding-right:5px"-

note: if you doing more then one icon type the padding size will be different by 1 or -1 px

or just put a space before the word like this

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-
awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i> Change</a>
ahmed
  • 15
  • 3