使用css内容在Font Awesome中添加多个图标和空间

Question

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

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

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

Answer 1

是的，这是可能的。您可以使用非中断unicode字符\00a0。

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

.icon-demo:before {
  font-family: 'FontAwesome';
  content: "\f1b9\00a0\00a0\00a0\f1b8";
}

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

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

@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>