フォントの驚くばかりの積み重なったアイコンSIZE

Question

私は積み重ねられたセット内の素晴らしいフォントのサイズに変更するように見えません。アイコンを現在のものより小さくしたいと思います。

追加のCSSルールを作成する必要はありますか？

私のコードはこれまで通りです。

<span class="fa-stack fa-5x"> 
    <i class="fa fa-circle fa-stack-2x icon-background4"></i> 
    <i class="fa fa-circle-thin fa-stack-2x icon-background6"></i> 
    <i class="fa fa-lock fa-stack-1x"></i> 
</span> 

<span class="fa-stack fa-5x"> 
    <i class="fa fa-circle fa-stack-2x icon-background5"></i> 
    <i class="fa fa-camera fa-stack-1x"></i> 
</span> 

CSS

.icon-background4 { 
    color: #c0ffc0; 
} 

.icon-background6 { 
    color: #40c040; 
} 

.icon-background5 { 
    color: #c0c0ff; 
} 

Fiddle。

ノート

• 私は、HTMLにインラインスタイルを使用する必要はありません。
• 私はすべてのヘルプは高く評価されているのと同じサイズ

ままに外側の円にしたいです。

Answer 1

更新答えはコメントに答える：

font-awesomeアイコンはフォントではなく、グラフィックスです。単純に使用してサイズを調整できますfont-size

組み込みクラスを追加すると、クラスを介してCSSプロパティが適用されます。

!importantを追加する必要があります。それ以外の場合は機能しません。たぶん、あなたはフォントサイズを使用してみました、それが改善される可能性がありますが、それは、コードフィドル

.icon-background4 { 
 
    color: #c0ffc0; 
 
} 
 

 
.icon-background6 { 
 
    color: #40c040; 
 
} 
 

 
.icon-background5 { 
 
    color: #c0c0ff; 
 
} 
 

 
.fa-camera { 
 
    font-size: 10px; 
 
} 
 

 

 
/* */ 
 

 
.test-icon-size { 
 
    font-size: 15px !important; 
 
} 
 

 
.test-icon-size-2 { 
 
    font-size: 40px !important; 
 
} 
 

 
.test-icon-size-3 { 
 
    font-size: 60px !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<!-- v2 --> 
 

 
<span class="fa-stack fa-5x"> 
 
    <i class="fa fa-circle fa-stack-2x icon-background5"></i> 
 
    <i class="fa fa-camera fa-stack-1x test-icon-size"></i> 
 
</span> 
 

 
<span class="fa-stack fa-5x"> 
 
    <i class="fa fa-circle fa-stack-2x icon-background5"></i> 
 
    <i class="fa fa-camera fa-stack-1x test-icon-size-2"></i> 
 
</span> 
 

 
<span class="fa-stack fa-5x"> 
 
    <i class="fa fa-circle fa-stack-2x icon-background5"></i> 
 
    <i class="fa fa-camera fa-stack-1x test-icon-size-3"></i> 
 
</span>

Answer 2

以下のコードを試してください。

<span class="fa-stack fa-2x"> 
    <i class="fa fa-circle fa-stack-2x icon-background4"></i> 
    <i class="fa fa-circle-thin fa-stack-2x icon-background6"></i> 
    <i class="fa fa-lock fa-stack-1x"></i> 
</span> 

<span class="fa-stack fa-2x"> 
    <i class="fa fa-circle fa-stack-2x icon-background5"></i> 
    <i class="fa fa-camera fa-stack-1x"></i> 
</span> 

Answer 3

<span class="fa-stack fa-5x">ではなく、fa-2xまたは3xをお試しください。デフォルトサイズが必要な場合は、親スパンタグからfa-5xを完全に削除してください。