Add multiple icons and space in Font Awesome with css content

Question

I can use Font Awesome icons in the following way:

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

Is it possible to make it to contain more than one icon (say \f1b9 and \f1b8), with a non-breaking space in between once?

Answer 1

Yes, it's possible. You can either use non-break unicode character \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>

Or, simply use one blank space in between, in most of the case, however if you need more than one space, make sure to set white-space: pre;, so that any whitespace will be preserved.

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