Font Awesome의 아이콘 색상을 변경할 수 있습니까?

Font Awesome의 아이콘 색상을 변경할 수 있습니까?

---

<a>어떤 이유로 든 아이콘을 태그 안에 넣어야합니다.
멋진 글꼴 아이콘의 색상을 검은 색으로 변경할 수있는 방법이 있습니까?
또는 <a>태그 안에 포장되어있는 한 불가능 합니까? 멋진 글꼴은 이미지가 아닌 글꼴이어야합니다.

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>

---

이것은 나를 위해 일했다 :

.icon-cog {
  color: black;
}

4.7.0 이상의 Font Awesome 버전의 경우 다음과 같습니다.

.fa-cog {
  color: black;
}

---

HTML :

    <i class="icon-cog blackiconcolor">

CSS :

    .blackiconcolor {color:black;}

버튼 아이콘에 클래스를 추가 할 수도 있습니다 ...

---

스타일 속성에서 색상을 지정할 수 있습니다.

<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>

---

전체 프로젝트의 글꼴 멋진 아이콘 색상을 변경하려면 CSS에서 이것을 사용하십시오.

.fa {
  color : red;
}

---

이 시도:

<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">

---

CSS 파일을 변경하지 않으려면 이것이 효과적입니다. HTML에서 색상으로 스타일을 추가하십시오.

<i class="fa fa-cog" style="color:#fff;"></i>

---

해당 종류의 버튼에서 톱니 바퀴 아이콘 만 누르려면 버튼에 클래스를 지정하고 버튼 안에있을 때만 아이콘의 색상을 설정할 수 있습니다.

HTML :

<a class="my-nice-button" href="/users/edit">
    <i class="icon-cog"></i>
    Edit profile
</a>

CSS :

.my-nice-button>i { color: black; }

이렇게하면 버튼의 직접적인 자손 아이콘이 검은 색으로 표시됩니다.

---

@ClarkeyBoy 답변을 참조하면 최신 버전의 Font-Awesome아이콘을 사용하거나 fa클래스 를 사용하는 경우 아래 코드가 정상적으로 작동합니다.

.fa.icon-white {
    color: white;
}

그런 다음 icon-white기존 클래스에 추가하십시오.

---

.fa-search{
    color:#fff;
 }

해당 코드를 CSS로 작성하면 색상이 흰색 또는 원하는 색상으로 변경됩니다.

---

원하는대로 원하는대로 텍스트 스타일을 지정하십시오 : D HTML :

<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
   <span style="color:black;">Text Name</span>
</a>

---

원하는 스타일로

style="color: white;font-size: 20px;"

---

속성을 사용하여 전경색 을 변경 하여 멋진 글꼴 아이콘의 색을 변경할 수 있습니다 . 다음은 예입니다.css color

<i class="fa fa-cog" style="color:white">

---

이것은 또한 svgs를 지원합니다

<style>
.fa-cog{
color:white;
}
</style>

---

<style>
.parent svg, .parent i{
color:white
}
</style>

<div class="parent">
  <i class="fa fa-cog" style="color:white">
</div>

---

---

특정 아이콘의 색상을 변경하려면 다음과 같이 사용할 수 있습니다.

.fa-stop {
    color:red;
}

---

이 코드를 같은 줄에 작성하면 아이콘 색상이 변경됩니다.

<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">

---

부트 스트랩 클래스를 사용하여 Font Awesome의 아이콘 색상을 변경할 수 있습니다

사용하다

text-color

예

text-white

---

HTML :

<i class="icon-cog blackiconcolor">

CSS :

 .blackiconcolor {color:black;}

클래스를 사용하면 필요한 모든 태그에 적용 할 수있는 무료 바인딩 속성이 제공됩니다.

참고 URL : https://stackoverflow.com/questions/14474452/can-i-change-the-color-of-font-awesomes-icon-color