在具有 css 内容的 Font Awesome 中添加多个图标和 space
Add multiple icons and space in Font Awesome with css content
我可以通过以下方式使用 Font Awesome 图标:
.icon-car {
content: "\f1b9";
}
是否可以让它包含多个图标(比如 \f1b9
和 \f1b8
),中间有一个不间断的 space?
是的,这是可能的。您可以使用 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>
我可以通过以下方式使用 Font Awesome 图标:
.icon-car {
content: "\f1b9";
}
是否可以让它包含多个图标(比如 \f1b9
和 \f1b8
),中间有一个不间断的 space?
是的,这是可能的。您可以使用 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>