使用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>

或者, in between, in most of the case, however if you need more than one space, make sure to set 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>