Tôi đang cố gắng làm cho biểu tượng Font Awesome trông mỏng hơn https://jsfiddle.net/cliffeee/7L6ehw9r/1/ .

Tôi đã thử sử dụng "-webkit-text-Stro" nhưng nó không giúp ích gì khi di chuột qua biểu tượng vì bạn có thể nhìn thấy màu nền và tôi không muốn nhìn thấy nó.

.accordion-toggle {
  màu nền: #777;
  màu sắc: trắng;
  con trỏ: con trỏ;
  phần đệm: 18px;
  chiều rộng: 100%;
  đường viền: không có;
  căn chỉnh văn bản: trái;
  phác thảo: không có;
  cỡ chữ: 15px;

}

.collapsed, .accordion-toggle:hover {
  màu nền: #555;
}

.accordion-toggle:sau {
-webkit-text-Stroke: 2px #eee; // Biểu tượng mỏng hơn không hoạt động 
    font-family: 'FontAwesome'; /* cần thiết để bật biểu tượng dấu mũ*/
    nội dung: "\f067";
  màu sắc: trắng;
  độ dày phông chữ: đậm;
  phao: đúng;
  lề trái: 5px;
  lề phải: 30px;



}

.collapsed:sau {
 nội dung: "\f068";
}

.sụp đổ {
  phần đệm: 0 18px;
  chiều cao tối đa: 0;
  tràn: ẩn;
  quá trình chuyển đổi: chiều cao tối đa 0,2 giây dễ dàng;
  màu nền: #f1f1f1;
}

câu trả lời hay nhất

Không, bạn không thể làm cho các biểu tượng phông chữ tuyệt vời trông mỏng hơn nhưng bạn sử dụng + Biểu tượng đã có độ dày mặc định của phông chữ tuyệt vời.

bạn là .accordion-toggle:sau Ứng dụng trong lớp độ dày phông chữ: đậm;. làm được độ dày phông chữ: bình thường; Nó sẽ thay đổi biểu tượng của bạn về độ dày bình thường.

Bạn có thể áp dụng độ dày phông chữ: đậm; để tăng độ dày của phông chữ thật tuyệt vời, nhưng bạn không thể sử dụng font-weight: nhẹ hơn; để giảm bớt nó.

Cảm ơn...

Về css - có cách nào để làm cho biểu tượng phông chữ tuyệt vời trông mỏng/mỏng hơn bằng CSS không? , chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/57882784/