Font Awesome Background color

Question

Khi sử dụng Font Awesome tuyệt vời, làm thế nào tôi có thể làm cho các biểu tượng không trong suốt - ví dụ nếu tôi muốn sử dụng http://fortawesome.github.io/Font-Awesome/icon/chevron-circle-up/ nhưng không có "mũi tên lên" trong vòng tròn màu đen.)?

Cảm ơn!

Answer 1

Thật không may, toàn bộ biểu tượng được coi là một "ký tự" duy nhất trên trang và như vậy, bạn không có quyền kiểm soát chi tiết đó. Bạn chỉ có thể đặt một thuộc tính "màu" duy nhất để đặt màu của ký tự/biểu tượng thành thứ bạn muốn.

Bây giờ, có thể là một bản hack quảng cáo. Kể từ giữa những nhân vật trong suốt, bạn có thể thiết lập một nền màu đằng sau những nhân vật để làm cho nó xuất hiện rằng giữa là một màu khác nhau bằng cách làm một cái gì đó như thế này:

<i class="fa fa-chevron-circle-up"></i> 

sau đó trong CSS của bạn:

.fa-chevron-circle-up { 
    background: yellow; 
    border-radius: 50%; 
    height: 1em; 
    width: 1em; 
} 

Nếu vòng tròn nền tắt biểu tượng, bạn có thể sử dụng line-height để khắc phục.

Answer 2

bạn có thể sử dụng fa-stack với biểu tượng fa-vòng tròn dưới khác để có thể kiểm soát tốt hơn trên các điểm ảnh chỉ ở biên giới:

<span class="fa-stack"> 
    <i class="fa fa-circle fa-stack-1x icon-a"></i> 
    <i class="fa fa-times-circle fa-stack-1x icon-b"></i> 
</span> 

với:

.icon-a { 
    color: #FFF; 
    font-size: 0.9em; 
} 
.icon-b { 
    color: #000; 
} 

Answer 3

tôi có một hack cho những người vẫn quan tâm:

<i class="fa fa-chevron-circle-up fa_with_bg"></i> 

Và css:

.fa_with_bg{ 
    position: relative; 
} 

.fa_with_bg::after{ 
    position: absolute; 
    content: ''; 
    background: #fff; 
    z-index: -1; 
    top: 10px; 
    left: 3px; 
    width: 35px; 
    height: 33px; 
} 

Bạn chỉ cần thêm lớp fa_with_bg vào đó.
* Bạn có thể phải chơi một chút với các thuộc tính top, left, width và height.