9

I have a button with a Font Awesome icon as content. That works perfect. Problem is that the text following it has no space between the font awesome icon and the text. How can I add a space to the content? 

a:before {
font-family: FontAwesome;
content: "\f095 --a   here --";
display: inline-block;

}

Jos
  • 310
  • 6
  • 17

3 Answers3

21

For CSS content   use \a0. The following is a list of different types of spaces and their CSS code:

  • space: \20
  • nbsp: \a0
  • en space: \2002
  • em space: \2003
  • 3 per em space: \2004
  • 4 per em space: \2005
  • 6 per em space: \2006
  • figure space: \2007
  • punctuation space: \2008
  • thin space: \2009
  • hair space: \200a
  • zero width space: \200b
  • narrow nbsp: \202f
  • medium mathematical space: \205f
  • zero width nbsp: \feff

Demo

a {
  display: block;
}

a::before {
  font-family: FontAwesome;
  display: inline-block;
}

#x0::before {
  content: "\f095";
}

#x1::before {
  content: "\f095\20"
}

#x2::before {
  content: "\f095\a0"
}

#x3::before {
  content: "\f095\2002"
}

#x4::before {
  content: "\f095\2003"
}

#x5::before {
  content: "\f095\2004"
}

#x6::before {
  content: "\f095\2005"
}

#x7::before {
  content: "\f095\2006"
}

#x8::before {
  content: "\f095\2007"
}

#x9::before {
  content: "\f095\2008"
}

#xa::before {
  content: "\f095\2009"
}

#xb::before {
  content: "\f095\200a"
}

#xc::before {
  content: "\f095\200b"
}

#xd::before {
  content: "\f095\202f"
}

#xe::before {
  content: "\f095\205f"
}

#xf::before {
  content: "\f095\feff"
}

#x0::after {
  content: "\a0\a0"
}

#x1::after {
  content: "\a0\a0\\20"
}

#x2::after {
  content: "\a0\a0\\a0"
}

#x3::after {
  content: "\a0\a0\\2002"
}

#x4::after {
  content: "\a0\a0\\2003"
}

#x5::after {
  content: "\a0\a0\\2004"
}

#x6::after {
  content: "\a0\a0\\2005"
}

#x7::after {
  content: "\a0\a0\\2006"
}

#x8::after {
  content: "\a0\a0\\2007"
}

#x9::after {
  content: "\a0\a0\\2008"
}

#xa::after {
  content: "\a0\a0\\2009"
}

#xb::after {
  content: "\a0\a0\\200a"
}

#xc::after {
  content: "\a0\a0\\200b"
}

#xd::after {
  content: "\a0\a0\\202f"
}

#xe::after {
  content: "\a0\a0\\205f"
}

#xf::after {
  content: "\a0\a0\\feff"
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<a href='#/' id='x0'>CALL</a>
<a href='#/' id='x1'>CALL</a>
<a href='#/' id='x2'>CALL</a>
<a href='#/' id='x3'>CALL</a>
<a href='#/' id='x4'>CALL</a>
<a href='#/' id='x5'>CALL</a>
<a href='#/' id='x6'>CALL</a>
<a href='#/' id='x7'>CALL</a>
<a href='#/' id='x8'>CALL</a>
<a href='#/' id='x9'>CALL</a>
<a href='#/' id='xa'>CALL</a>
<a href='#/' id='xb'>CALL</a>
<a href='#/' id='xc'>CALL</a>
<a href='#/' id='xd'>CALL</a>
<a href='#/' id='xe'>CALL</a>
<a href='#/' id='xf'>CALL</a>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • 1
    If there are characters after the whitespace codes which are not displayed correctly this may be solved by adding zeros at the beginning to a length of 6 digits -> `\2002`-> `\002002` https://www.w3.org/International/questions/qa-escapes – Corrl Dec 17 '22 at 09:18
0

you can add padding-right:10px; or whatever padding for right or left that you prefered

a::before {
font-family: FontAwesome;
content: "\f095\a0";
display: inline-block;
padding-right:10px;
}
0

You can add spacing with the inbuilt fa-fw class

Use like this

<i class="fa fa-close fa-fw"></i>
kiranvj
  • 32,342
  • 7
  • 71
  • 76