làm thế nào để tạo kiểu cho một vòng tròn Fontawesome biểu tượng nền?

Question

Có cách nào đơn giản để tạo kiểu cho nền biểu tượng Fontawesome đúng cách không? Tôi đang cố gắng làm điều đó với biểu tượng icon-remove-sign (có đặc trưng là hình tròn) để xuất hiện hình chữ thập màu trắng và hình tròn có màu đỏ.

Sự khó khăn là biểu tượng là công nhận như một hình vuông, vì vậy tôi đã cố gắng để làm cho nó một vòng tròn để áp dụng màu đỏ background color (nhưng tôi đang tự hỏi nếu không có một cái gì đó đơn giản hơn):

.icon-remove-sign { 
    padding: 0; 
    border-radius: 25px; 
    color: white; 
    background-color: red; 
} 

Nhưng không đủ, chúng ta có thể thấy nền đỏ ở phía trên cùng của biểu tượng.

Bạn sẽ làm như thế nào?

Answer 1

Nó cảm thấy một chút hacky, nhưng tôi quản lý để có được nó làm việc ở đây:

http://jsfiddle.net/3FvxA/

display:block và cho nó một chiều cao và chiều rộng có vẻ là bí mật.

Answer 2

Với fontawesome bạn có thể sử dụng các biểu tượng xếp chồng lên nhau như thế này:

<span class="fa-stack fa-lg"> 
    <i class="fa fa-camera fa-stack-1x"></i> 
    <i class="fa fa-ban fa-stack-2x text-danger"></i> 
</span> 

Answer 3

Giả sử rằng HTML của bạn trông như thế này:

<div class="social-circle"> 
    <a class="fa fa-facebook" href="#"></a> 
    <a class="fa fa-twitter" href="#"></a> 
    <a class="fa fa-pinterest-p" href="#"></a> 
</div> 

Bạn có thể làm một cái gì đó như:

.social-circle [class*="fa fa-"] { 
    width: 25px; 
    height: 25px; 
    color: white; 
    background-color: grey; 
    border-radius: 25px; 
    display: inline-block; 
    line-height: 25px; 
    margin: auto 3px; 
    font-size: 15px; 
    text-align: center; 
} 
.fa-facebook:hover { 
    background-color: #3B5A9B; 
} 
.fa-twitter:hover { 
    background-color: #4FC6F8; 
} 
.fa-pinterest-p:hover { 
    background-color: #CA2128; 
} 

Xem ví dụ tại đây: http://jsfiddle.net/k69xj2n8/