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


264

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

여기에 이미지 설명을 입력하십시오

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


답변:


347

이것은 나를 위해 일했다 :

.icon-cog {
  color: black;
}

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

.fa-cog {
  color: black;
}

@Evans 감사하지만 문제는 언젠가 <i class = "icon-cog icon-white">을 검은 색의 테이블 셀에 넣는 것입니다. 귀하의 CSS는 :( 블랙도로를 변경해야
HUSTEN

3
다음을 추가 할 수 있습니다. .icon-cog.icon-white {color : white; }
Evan Hahn

3
방금이 문제가 발생했습니다. 모든 아이콘에 'fa'클래스를 추가 한 다음 퍼팅을 .fa {color: green;}수행했습니다. 그런 다음 .fa.icon-white {color: white;}위와 동일한 효과를 얻을 수 있습니다 .
ClarkeyBoy

변경이 가능합니까?background-color
vamsikrishnamannem

@vamsikrishnamannem Yup. background-color: #112233CSS에 추가 할 수 있습니다 . 이 코드 를 확인하십시오 .
Evan Hahn

50

HTML :

    <i class="icon-cog blackiconcolor">

CSS :

    .blackiconcolor {color:black;}

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


1
이것은 깔끔하고 깔끔한 솔루션입니다. 나는 글꼴 멋진 아이콘에 적용하고 있음을 분명히하기 위해 fa-black 또는 fa-blue와 같은 fa 접두사로 클래스 이름을 지정하는 것을 선호합니다.
DavidHyogo

36

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

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

16
-1 첫째, 요청한대로 아이콘의 색상뿐만 아니라 텍스트의 색상도 변경되므로 잘못되었습니다. 둘째, 인라인 CSS 사용을 홍보해서는 안됩니다.
Adrian Schmidt

텍스트 색상이 아닌 "아이콘 색상 만"이라는 질문은 어디에 있습니까?
dandrews

3
나는 그것이 질문이 표현되는 방식에 의해 분명히 암시된다고 생각합니다. 그리고 당신이 당신의 대답 : 업데이트 이후 당신이 동의 할 것 같다
아드리안 슈미트

2
에 대한 작은 힌트를주고 싶습니다 Bootstrap. 클래스 <i> 를 사용하여 태그를 지정하면 text-primary아이콘 색상을 파란색으로 재정의하십시오. 알아두면 좋습니다.
elia

9

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

.fa {
  color : red;
}

이것은 좋지만 프로젝트의 모든 아이콘을 변경합니다. .fa-black {color : # 000;}과 같은 클래스를 만들었습니다. 그런 다음 다른 색상을 원했던 fa-black 클래스를 아이콘에 추가했습니다.
DavidHyogo

7

이 시도:

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

어디 않는 text-red, text-blue또는 text-yellow에서 온?
colidyre

그것은 부트 스트랩 클래스에서 온
라훌 Tathod

6

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

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

5

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

HTML :

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

CSS :

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

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


3

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

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

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


2
.fa-search{
    color:#fff;
 }

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


2

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

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


1

속성을 사용하여 전경색변경 하여 멋진 글꼴 아이콘의 색을 변경할 수 있습니다 . 다음은 예입니다.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>


1

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

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

0

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

.fa-stop {
    color:red;
}

0

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

사용하다

text-color

text-white

0

나를 위해 일한 유일한 것은 인라인 CSS + 재정의입니다.

<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>

-6

HTML :

<i class="icon-cog blackiconcolor">

CSS :

 .blackiconcolor {color:black;}

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


4
-1 Font Awesome 아이콘은 텍스트이므로 이름입니다. 벤더별 트릭을 사용하지 않고 다른 텍스트와 마찬가지로 CSS를 사용하여 색상을 지정해야합니다. 또한 텍스트이기 때문에 이미 흑백 (또는 단색)입니다.
Adrian Schmidt

2
@AdrianSchmidt 위에서 언급 한 대답은 검은 색으로 이미지를 변환, 나는이와 글꼴 색상을 변경하는 것을 의미하지 않았다, 나는 ... 당신이 나를 점점 희망
아메 기계적

2
이해 했어요. 그래도 그 질문에 대한 답은 여전히 ​​틀립니다. Font Awesome 아이콘은 이미지가 아니라 텍스트입니다.
Adrian Schmidt
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.