設置css內容中指定的圖標的寬度

Question

我有一個如下所示的代碼。

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

基本上我想設置+圖標的寬度。但我無法。有什麼辦法做到這一點？

Answer 1

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

更改和寬度：10px將工作。如果你想增加+圖標的大小，使用字體大小

見下

編輯：讀您的評論後，我必須告訴你，-和+標誌（從鍵盤）是不一樣的標誌樣式。減號實際上是hyphen-minus。您可以在這裏閱讀更多>hyphen minus。

所以。有兩種可能的方式來完成這項工作。

1.使用正確的minus-sign而不是連字符減號，它的統一碼爲U-2212。

下面

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

 
}

<div class="show"> 
 

 
</div>

2.使用FontAwesome

見片段的兩個圖標

.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; 
 

 
}

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