서클 배경 색상 변경, 아이콘 당 개별 색상

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-pencil, fa-graduation-cap, fa-desktop 아이콘을 사용하고 있습니다. 다음은 아이콘 위젯 자체에서 사용하는 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

위젯의 각 글꼴 굉장한 <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 클래스를 생성하는 것입니다 : 위젯의 HTML에 적절한 클래스를

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

그리고 적용

(예를 들어, fa-pencil 항상 노란색 배경이 있어야합니다) 같은 배경 색상을 가지고 그 아이콘의 모든 인스턴스를 각 아이콘 유형에 대해 서로 다른 색상을 설정하기를 원하지만 원하는 경우

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

또는, 당신은 색상을 지정할 수 있습니다 CSS의 각 아이콘 유형으로 귀하의 widget_custom_html i 스타일을 재정의 할 정도로 구체적으로 작성하십시오. 다음은 작동합니다 :

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

Answer 3

이 하나를 시도,

<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"보다 더 나은 것을 추가 할.