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


264

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?

nhập mô tả hình ảnh ở đây

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


Câu trả lời:


347

Đ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;
}

@Evans Cảm ơn nhưng vấn đề là đôi khi tôi đặt <i class = "icon-cog icon-white"> trên ô của bảng có màu đen. Css của bạn buộc phải đổi nó thành màu đen :(
HUSTEN

3
Bạn có thể thêm vào như sau: .icon-cog.icon-white {color: white; }
Evan Hahn

3
Chỉ cần bắt gặp điều này - tôi thấy rằng việc thêm một lớp 'fa' vào tất cả các biểu tượng và sau đó thực .fa {color: green;}hiện thủ thuật. Sau đó, bạn có thể làm .fa.icon-white {color: white;}để có được hiệu ứng như bạn muốn ở trên.
ClarkeyBoy

Có thể thay đổi khôngbackground-color
vamsikrishnamannem 6/03/2015

@vamsikrishnamannem Yup. Bạn có thể thêm background-color: #112233vào CSS. Kiểm tra mã này cho một ví dụ.
Evan Hahn

50

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


1
Đây là một giải pháp tốt đẹp, gọn gàng. Tôi thích đặt tên các lớp với tiền tố fa như fa-black hoặc fa-blue chỉ để làm rõ rằng tôi đang áp dụng chúng cho các biểu tượng tuyệt vời.
DavidHyogo

36

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>

16
-1 Thứ nhất, điều này là sai, vì nó cũng sẽ thay đổi màu của văn bản, không chỉ màu của biểu tượng, như được yêu cầu. Thứ hai, không nên quảng bá css nội tuyến.
Adrian Schmidt

Trường hợp câu hỏi nói "chỉ màu của biểu tượng" chứ không phải màu của văn bản?
vẽ

3
Tôi nghĩ rằng điều đó rõ ràng ngụ ý theo cách câu hỏi được đặt ra. Và có vẻ như bạn sẽ đồng ý, vì bạn đã cập nhật câu trả lời của mình :)
Adrian Schmidt

2
Tôi muốn đưa ra một gợi ý nhỏ cho Bootstrap. <i> gắn thẻ bằng cách sử dụng text-primarylớp, ghi đè màu của biểu tượng thành màu xanh. Vì vậy, tốt để nhận thức được nó.
Elia

9

Để 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;
}

Điều này là tốt nhưng thay đổi tất cả các biểu tượng trong dự án của tôi. Tôi đã tạo các lớp như .fa-black {color: # 000;}. Sau đó tôi đã thêm các lớp fa-black vào các biểu tượng nơi tôi muốn một màu khác.
DavidHyogo

7

Thử cái này:

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

Và nơi nào text-red, text-bluehoặc text-yellowđến từ đâu?
colidyre

nó đến từ các lớp bootstrap
Rahul Tathod

6

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>

5

Để 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.


3

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ó


2
.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ó


2

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>

1

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

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

1

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>


1

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

0

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

0

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

0

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

-6

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.


4
-1 Phông chữ Biểu tượng tuyệt vời là văn bản, do đó tên. Chúng nên được tô màu bằng css như bất kỳ văn bản nào khác, không sử dụng các thủ thuật dành riêng cho nhà cung cấp. Ngoài ra, vì chúng là văn bản, chúng đã có màu đen trắng (hoặc màu đơn sắc).
Adrian Schmidt

2
@AdrianSchmidt Câu trả lời được nêu ở trên là để chuyển đổi một hình ảnh thành màu đen, tôi không có ý thay đổi màu phông chữ này, tôi hy vọng bạn sẽ nhận được tôi ..
ameya rote

2
Tôi hiểu. Câu trả lời vẫn không chính xác đối với câu hỏi mặc dù. Phông chữ Biểu tượng tuyệt vời không phải là hình ảnh, chúng là văn bản.
Adrian Schmidt
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.