Thay đổi phông chữ của các biểu tượng FontAwesome?

Question

Tôi muốn làm cho một trong các biểu tượng FontAwesome hơi nặng hơn một chút - nặng hơn nhiều so với phông chữ tôi đang sử dụng. Này như thế nào nó trông hiện:

:

Ugly, phải không? Vì vậy, tôi đã thử đặt lại trọng số phông chữ như sau:

.tag .icon-remove { 
    font-weight: 100; 
} 

Thuộc tính dường như được đặt chính xác trong CSS nhưng không có hiệu lực - biểu tượng trông nặng như trước đây. Tôi cũng đã thử font-weight: lighter và -webkit-text-stroke-width: 1px không có hiệu lực.

Có cách nào tôi có thể làm cho biểu tượng kém nặng hơn không? Các tài liệu nói "Anything you can do with CSS font styles, you can do with Font Awesome" nhưng tôi không thể tìm ra cách thực hiện việc này.

Answer 1

2018 Cập nhật

Font tạo ảnh vui nhộn 5 bây giờ tính năng ánh sáng, thường xuyên và rắn biến thể. Biểu tượng đặc trưng trong câu hỏi này có phong cách sau đây dưới sự biến thể khác nhau:

Một câu trả lời hiện đại cho câu hỏi này sẽ là các biến thể khác nhau của các biểu tượng có thể được sử dụng để làm biểu tượng xuất hiện táo bạo hơn hay nhẹ hơn. Nhược điểm duy nhất là nếu bạn đang sử dụng solid, bạn sẽ phải quay lại các câu trả lời ban đầu ở đây để làm cho chúng trở nên lạnh hơn và tương tự như vậy nếu bạn đang sử dụng ánh sáng bạn phải thực hiện tương tự những thứ nhẹ hơn.

Phông chữ tuyệt vời How To Use tài liệu hướng dẫn cách sử dụng các biến thể này.

---

gốc trả lời

Font ảnh vui nhộn tạo sử dụng các Private Use region of Unicode. Ví dụ, .icon-remove này bạn đang sử dụng được thêm vào bằng cách sử dụng pseudo-selector ::before, thiết lập nội dung của nó để \ f00d ():

.icon-remove:before { 
    content: "\f00d"; 
} 

Font tạo ảnh vui nhộn không chỉ đi kèm với một biến thể font-weight, tuy nhiên trình duyệt sẽ hiển thị điều này vì chúng sẽ hiển thị bất kỳ phông chữ nào chỉ với một biến thể. Nếu bạn nhìn kỹ, phông chữ normal không đậm như trọng số phông chữ bold. Thật không may là một trọng lượng phông chữ bình thường không phải là những gì bạn đang sau.

Tuy nhiên, bạn có thể thay đổi màu của nó thành thứ gì đó tối hơn và giảm kích thước phông chữ để làm nổi bật một chút. Từ hình ảnh của bạn, các "thẻ" văn bản xuất hiện nhẹ hơn nhiều so với biểu tượng, vì vậy tôi khuyên bạn nên sử dụng một cái gì đó như:

.tag .icon-remove { 
    color:#888; 
    font-size:14px; 
} 

Dưới đây là một JSFiddle example, và here là thêm bằng chứng cho thấy điều này chắc chắn là một phông chữ.

Answer 2

Chỉ để giúp mọi người truy cập trang này.Đây là một thay thế nếu bạn linh hoạt với việc sử dụng một số thư viện biểu tượng khác.

James là đúng mà bạn không thể thay đổi trọng lượng phông chữ tuy nhiên nếu bạn đang tìm kiếm cái nhìn hiện đại hơn cho các biểu tượng sau đó bạn có thể xem xét ionicons

Nó có cả ios và các phiên bản Android cho các biểu tượng.

Answer 3

Tác giả dường như đã thực hiện phương pháp freemium đối với thư viện phông chữ và cung cấp Black Tie để cung cấp các trọng số khác nhau cho thư viện Font-Awesome.

Answer 4

Trình duyệt webkit hỗ trợ khả năng thêm "đột quỵ" vào phông chữ. bit này của phong cách làm cho phông chữ trông mỏng hơn (giả sử một nền trắng):

-webkit-text-stroke: 2px white; 

Ví dụ trên codepen đây: http://codepen.io/mackdoyle/pen/yrgEH Một số người đang sử dụng SVG cho một cross-platform "đột quỵ" giải pháp: http://codepen.io/CrocoDillon/pen/dGIsK

Answer 5

Một giải pháp tôi đã sử dụng để tạo các biểu tượng fontawesome nhẹ hơn, tương tự như cách tiếp cận webkit-text-stroke nhưng di động hơn, là đặt màu của biểu tượng giống như nền (hoặc trong suốt) và sử dụng bóng văn bản để tạo đường viền:

.fa-outline-dark-gray { 
    color: #fff; 
    text-shadow: -1px -1px 0 #999, 
      1px -1px 0 #999, 
      -1px 1px 0 #999, 
      1px 1px 0 #999; 
} 

Nó không hoạt động trong tức là < 10, nhưng ít nhất nó không bị giới hạn cho các trình duyệt webkit.