在 CSS 内容中添加空格答案

【问题标题】：Add a space in CSS content在 CSS 内容中添加空格
【发布时间】：2018-10-20 05:18:40
【问题描述】：

我有一个带有Font Awesome icon as content 的按钮。这很完美。问题是它后面的文本在字体真棒图标和文本之间没有空格。如何在内容中添加空格？

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

}

【问题讨论】：

边距或内边距不起作用吗？
友友能否举个例子
你可以试试 CSS 中的字母间距：w3schools.com/cssref/tryit.asp?filename=trycss_letter-spacing

标签： css font-awesome

【解决方案1】：

对于 CSS 内容 &nbsp; 使用 \a0。以下是不同类型空格及其 CSS 代码的列表：

空格：\20
nbsp：\a0
空格：\2002
em 空格：\2003
每个 em 空间 3 个：\2004
每个 em 空间 4 个：\2005
每个 em 空间 6 个：\2006
图空间：\2007
标点空格：\2008
薄空间：\2009
发空：\200a
零宽度空间：\200b
狭窄的nbsp：\202f
中等数学空间：\205f
零宽度nbsp：\feff

演示

  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>

【讨论】：

【解决方案2】：

您可以使用内置的 fa-fw 类添加间距

这样使用

<i class="fa fa-close fa-fw"></i>

【讨论】：

【解决方案3】：

您可以添加padding-right:10px; 或padding 为您喜欢的右侧或左侧

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

【讨论】：