Tôi có thể thay đổi màu của màu biểu tượng của Font Awesome không?

Tôi phải bọc biểu tượng của mình trong một <a>thẻ vì một số lý do.
Có cách nào có thể để thay đổi màu của biểu tượng phông chữ tuyệt vời thành màu đen không?
hoặc là không thể miễn là nó được bọc trong một <a>thẻ? Font tuyệt vời được cho là phông chữ không phải hình ảnh, phải không?

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

Điều này làm việc cho tôi:

.icon-cog {
  color: black;
}

Đối với các phiên bản Font Awesome trên 4.7.0 , có vẻ như sau:

.fa-cog {
  color: black;
}

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

bạn cũng có thể thêm lớp học thêm vào biểu tượng nút ...

Bạn có thể chỉ định màu trong thuộc tính style:

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

Để thay đổi phông chữ màu sắc biểu tượng tuyệt vời cho toàn bộ dự án của bạn, hãy sử dụng màu này trong css của bạn

.fa {
  color : red;
}

Thử cái này:

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

Nếu bạn không muốn thay đổi tệp CSS, đây là cách phù hợp với tôi. Trong HTML, thêm kiểu với màu:

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

Để chỉ nhấn các biểu tượng cog trong loại nút đó, bạn có thể cung cấp cho nút một lớp và chỉ đặt màu cho biểu tượng khi bên trong nút.

HTML:

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

CSS:

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

Điều này sẽ làm cho bất kỳ biểu tượng nào là hậu duệ trực tiếp của nút của bạn màu đen.

Với tham chiếu đến câu trả lời @ClarkeyBoy, mã bên dưới hoạt động tốt, nếu sử dụng phiên bản mới nhất của Font-Awesomebiểu tượng hoặc nếu bạn sử dụng facác lớp

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

Và, sau đó thêm icon-whitevào lớp hiện có

.fa-search{
    color:#fff;
 }

bạn viết mã đó bằng css và nó sẽ thay đổi màu thành màu trắng hoặc bất kỳ màu nào bạn muốn, bạn chỉ định nó

chỉ cần cung cấp và kiểu văn bản bất cứ điều gì bạn muốn: D HTML:

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

chỉ cần cho nó phong cách bất cứ điều gì bạn muốn

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

Bạn có thể thay đổi màu của biểu tượng fontawgie bằng cách thay đổi màu nền trước của nó bằng thuộc css colortính . Sau đây là các ví dụ:

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

Điều này cũng hỗ trợ

<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>

Viết mã này trong cùng một dòng, điều này thay đổi màu biểu tượng:

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

Nếu bạn muốn thay đổi màu sắc của một biểu tượng cụ thể, bạn có thể sử dụng một cái gì đó như thế này:

.fa-stop {
    color:red;
}

Bạn có thể thay đổi màu biểu tượng của Font Awesome với lớp bootstrap

sử dụng

text-color

thí dụ

text-white

Đối với tôi điều duy nhất hoạt động là css nội tuyến + ghi đè

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

HTML:

<i class="icon-cog blackiconcolor">

css:

 .blackiconcolor {color:black;}

Sử dụng lớp sẽ cung cấp cho bạn một thuộc tính ràng buộc miễn phí mà bạn có thể áp dụng trên bất kỳ thẻ nào bạn yêu cầu.