円の背景の色を変更する、アイコンごとに個別の色を設定する

Question

私はwordpressのカスタムHTMLウィジェットでフォントの素晴らしいアイコンを使用しています。私は正常にこのコード

.widget_custom_html i { 
background-color:#19CBCF; 
border-radius:150px; 
color:#FFFFFF; 
font-size:90px; 
height:150px; 
line-height:150px; 
width:150px; 
} 

を使用して、そのウィジェット内のすべてのアイコンのアイコンや背景の円の色を変更することができたCSSを使用して

CSSまたはウィジェットのいずれかで、方法がある場合、私は思ったんだけど各アイコンの背景色を設定するHTML。私はアイコンの鉛筆、FAの卒業キャップ、FAデスクトップを使用しています。ここでアイコン用のウィジェット自体に使用しているHTMLは...

<p style="text-align: center;"><i class="fa fa-desktop" aria-hidden="true"></i></p> 

ありがとう！

Answer 1

共有プロパティを設定した後で、各アイコンのクラスを使用してターゲティングできます。

.widget_custom_html i.fa-desktop {background-color:red};

例えば

はFA-デスクトップのアイコンを変更し、それが赤になるだろう。

基本的な作業例：

p { 
 
    text-align: center; 
 
} 
 

 
.widget_custom_html i { 
 
    border-radius: 150px; 
 
    color: #FFFFFF; 
 
    font-size: 90px; 
 
    height: 150px; 
 
    line-height: 150px; 
 
    width: 150px; 
 
} 
 

 
.widget_custom_html i.fa-desktop { 
 
    background-color: red; 
 
} 
 

 
.widget_custom_html i.fa-graduation-cap { 
 
    background-color: blue; 
 
} 
 

 
.widget_custom_html i.fa-pencil { 
 
    background-color: green; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" /> 
 

 
<div class="widget_custom_html"> 
 
    <p><i class="fa fa-desktop" aria-hidden="true"></i></p> 
 
    <p><i class="fa fa-graduation-cap" aria-hidden="true"></i></p> 
 
    <p><i class="fa fa-pencil" aria-hidden="true"></i></p> 
 
</div>

の

Answer 2

ウィジェットのfont-awesome <i>タグのそれぞれに、background-colorスタイル属性を使用できます。あなたの例を使用する：

<p style="text-align: center;"><i class="fa fa-desktop" aria-hidden="true" style="background-color: yellow;"></i></p> 

background-colorが通常受け入れる値のいずれかを使用できます。

それとも、あなたは色の限られた数を使用したい場合は、より良いオプションは、各色のCSSクラスを作成するには、次のようになります。

bg-green { 
    background-color: green; 
} 
bg-blue { 
    background-color: blue; 
} 
..... (etc.) 

そしてウィジェットにHTMLに適切なクラスを適用します。

<p style="text-align: center;"><i class="fa fa-desktop bg-blue" aria-hidden="true"></i></p> 

それとも、各アイコンの種類ごとに異なる色を設定したいのですが、そのアイコンのすべてのインスタンスが同じ背景色を（例えば、fa-pencilは常に黄色の背景を持っている必要があります）したい場合、あなたは色を割り当てることができますCSSの各アイコンタイプにあなたのwidget_custom_html iスタイルをオーバーライドするのに十分具体的であるようにしてください。以下は動作します：

widget_custom_html .fa-pencil { 
    background-color: yellow; 
} 

Answer 3

はこの1つを試してみてください、

<p style="text-align: center;"><i class="fa fa-desktop" aria-hidden="true" style="background-color: yellow;"></i></p> 

あなたのCSSも

.fa .fa-desktop { 
    color: red; 
} 

の力を試す重要なそれが動作しない場合、 希望で！この助け:)

Answer 4

私は完全に@blendに同意しますenzoの答えは、CSSクラスを作成し、HTML要素で使用しています。

bg-color-red{ 
background-color:red; 
} 

<p style="text-align: center;"><i class="fa fa-desktop bg-blue" aria-hidden="true"></i></p> 

はしかし、あなたはいくつかの他の要素であなたのCSSを再利用できるようにCSSを使用すると、インラインコードstyle="background-color:red"よりも優れていることを追加します。