设置css内容中指定的图标宽度

Question

我有一个如下代码。

.show:before {
content: '+',
display: inline-block;
width: 10px;
}

基本上我想设置+图标的宽度。但我无法做到。这样做的方法是什么？

Answer 1

您在,之后使用content:"+"而不是;。

改变它和宽度：10px将起作用。如果要增加+图标的大小，请使用font-size

见下文

编辑：阅读完评论后，我必须告诉您-和+标志（来自键盘）的标志不一样。减号实际上是hyphen-minus。你可以在这里阅读更多＆gt; hyphen minus。

因此。有两种方法可以使这项工作。

1。使用正确的minus-sign代替（不是连字符减号），其中包含U-2212的unicode。

请参阅下面的代码段

＆＃13;

＆＃13;

.show:before {
content: '+';
display: inline-block;
width: 10px;
font-size:30px;
}
.show:after {
content: '\2212';
display: inline-block;
width: 10px;
font-size:30px;

}

＆＃13;

<div class="show">

</div>

＆＃13;

＆＃13;

＆＃13;

2. ：使用FontAwesome作为两个图标

＆＃13;

＆＃13;

.show:before {
content: '\f067';
display: inline-block;

font-size:30px;
font-family:fontAwesome;
}
.show:after {
content: '\f068';
display: inline-block;

font-size:30px;
font-family:fontAwesome;

}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<div class="show">
blabla
</div>

＆＃13;

＆＃13;

＆＃13;