폰트 어썸의 코그 아이콘 색상을 변경할 수 있습니까?

폰트 어썸의 코그 아이콘 색상을 변경할 수 있습니까?

나는 내 아이콘을 안에 싸야 합니다.<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>

사용해 보십시오.

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

전체 프로젝트에 대한 글꼴 멋진 아이콘 색상을 변경하려면 CSS에서 이 색상을 사용합니다.

.fa {
  color : red;
}

만약 당신이 CSS 파일을 변경하고 싶지 않다면, 이것이 저에게 맞는 것입니다.HTML에서 색상이 있는 스타일 추가:

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

글꼴이 멋진 아이콘의 색상을 검은색으로 변경할 수 있는 가능한 방법이 있습니까?

네, 있습니다.아래 캡처된 내용 참조하십시오.

<!-- Assuming that you don't have, this needs to be in your HTML file (usually the header) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Here is what you need to use -->
<a href="/users/edit" class="fa fa-cog" style="color:black"> Edit Profile</a>

폰트 대박은 원래 이미지가 아닌 폰트여야 하는 거죠?

네, 이것은 글꼴입니다.따라서 품질 저하 없이 모든 크기로 확장할 수 있습니다.

그런 종류의 버튼에서 톱니 모양의 아이콘만 누르려면 버튼에 클래스를 부여하고 버튼 안에서만 아이콘의 색상을 설정할 수 있습니다.

HTML:

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

CSS:

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

단추의 직계 하위 항목인 아이콘은 검은색으로 표시됩니다.

나에게 유일하게 효과가 있었던 것은 인라인 CSS + 오버라이드입니다.

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

@ClarkeyBoy 답변과 관련하여 최신 버전을 사용하는 경우 아래 코드가 정상적으로 작동합니다.Font-Awesome아이콘 또는 사용하는 경우fa반

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

그리고 추가합니다.icon-white기존 클래스에

그냥 원하는 대로 주고 텍스트 스타일:D HTML:

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

.fa-search{
    color:#fff;
 }

당신이 그 코드를 CSS로 쓰면, 그것은 당신이 원하는 색이나 흰색으로 바뀔 것입니다, 당신이 그것을 지정합니다.

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

사용하다

text-color

예

text-white

외부 css 파일에서 색상을 변경할 수 없는 경우가 있습니다.아이콘 태그에 인라인 CSS 속성을 추가하면 작동합니다.

예를들면

<i class="fa-solid fa-keyboard" style="color: grey;"></i>

당신이 원하는 스타일로 그것을 주세요.

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

속성을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>

---

이 코드를 동일한 줄에 쓰면 아이콘 색상이 변경됩니다.

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

색상 속성을 사용하여 다음과 같이 대상 요소의 색상을 변경합니다.

.icon-cog { // selector of your element
    color: black;
}

또는 최신 버전의 폰트 어썸에서는 채워진 아이콘 또는 채워지지 않은 아이콘 중에서 선택할 수 있습니다.

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

.fa-stop {
    color:red;
}

글꼴이 멋진 아이콘의 색상을 변경하는 것은 다소 까다로울 수 있습니다.더 간단한 방법은 다음과 같은 글꼴로 정의된 클래스 내에 자신의 클래스 이름을 추가하는 것입니다.

.

그리고 CSS에서 custom_defined_class_name을 대상으로 하여 원하는 대로 색상을 변경합니다.

svg 파일 vs 코드 같은 것을 엽니다.

줄을 바꾸다, 줄 바꿈

경로 채우기="회색" 원하는 색상으로! 저의 경우 회색으로 변경합니다!

스타일을 추가한 다음 원하는 색상을 선택하여 굵게 표시합니다.

HTML:

<i class="icon-cog blackiconcolor">

css :

 .blackiconcolor {color:black;}

클래스를 사용하면 원하는 태그에 적용할 수 있는 무료 바인딩 속성을 얻을 수 있습니다.

언급URL : https://stackoverflow.com/questions/14474452/can-i-change-the-color-of-font-awesomes-cog-icon