css - 有没有办法使用 CSS 使字体很棒的图标看起来更薄/更 slim ？

Question

我正在尝试让 Font Awesome 图标看起来更 slim https://jsfiddle.net/cliffeee/7L6ehw9r/1/ .

我尝试使用“-webkit-text-stroke”，但将鼠标悬停在图标上时没有帮助，因为您可以看到背景颜色，而我不希望它被看到。

.accordion-toggle {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;

}

.collapsed, .accordion-toggle:hover {
  background-color: #555;
}

.accordion-toggle:after {
-webkit-text-stroke: 2px #eee; //  Icons thinner not working 
    font-family: 'FontAwesome'; /* essential to enable caret symbol*/
    content: "\f067";
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  margin-right: 30px;



}

.collapsed:after {
 content: "\f068";
}

.collapse {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

Answer 1

不，你不能让 font awesome 图标看起来更细，但你使用的 + 图标已经是 font awesome 的默认粗细。

您正在 .accordion-toggle:after 类中应用 font-weight: bold;。使其成为 font-weight: normal; 它会将您的图标更改为正常厚度。

您可以通过应用 font-weight: bold; 来增加 font awesome 的粗细度，但是您不能使用 font-weight: lighter; 来减少它。

谢谢你...