在具有 css 内容的 Font Awesome 中添加多个图标和 space

Question

我可以通过以下方式使用 Font Awesome 图标：

.icon-car {
  content: "\f1b9";
}

是否可以让它包含多个图标（比如 \f1b9 和 \f1b8），中间有一个不间断的 space？

Answer 1

是的，这是可能的。您可以使用 non-break unicode 字符 [=14=]a0.

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

.icon-demo:before {
  font-family: 'FontAwesome';
  content: "\f1b9[=10=]a0[=10=]a0[=10=]a0\f1b8";
}

<span class="icon-demo"></span>

或者，在大多数情况下，只需在中间使用一个空格 space </code>，但是如果您需要多个 space，请确保设置 <code>white-space: pre;，以便保留任何白色 space。

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

.icon-demo:before {
  font-family: 'FontAwesome';
  content: "\f1b9          \f1b8";
  white-space: pre;
}

<span class="icon-demo"></span>

在具有 css 内容的 Font Awesome 中添加多个图标和 space

Add multiple icons and space in Font Awesome with css content

css

font-awesome