有没有办法让更轻的字体很棒的图标？

Question

我知道我可以使用他们提供的 font awesome ligher icon，但是有没有办法用 css 做到这一点？

<i class="fal fa-history"></i>

Answer 1

您可以设置 color 打火机：

i {
  color: orange;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<i class="fal fa-history"></i>

Answer 2

Webkit 浏览器支持添加 stroke 到 fonts.it 使字体看起来更轻（假设为白色背景）：

-webkit-text-stroke: 3px white;

Answer 3

您可以使用不同程度的不透明度来更改背景，使其看起来更浅，或者您可以简单地将颜色设置为打火机 色调。

.white {
  background: white;
}

.red {
  background: red;
}

.green {
  background: green;
}

.lightblue {
  background: lightblue;
}

.orange {
  background: orange;
}

.yellow {
  background: yellow;
}

.fushcia {
  background: #FF77FF;
}

.icon-1 {
  color: black;
}

.icon-2 {
  color: black;
  opacity: 0.5;
}

.icon-3 {
  color: black;
  opacity: 0.5;
}

.icon-4 {
  color: black;
  opacity: 0.5;
}

.icon-5 {
  color: black;
  opacity: 0.2;
}

.parent {
  padding: 10px 2px;
}

.icon-6 {
  color: black;
  color: lightgray;
}

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="white parent">
  <i class="fal fa-history icon-1"></i> no opacity
</div>
<div class="red parent">
  <i class="fal fa-history icon-1"></i> = no opacity | 
  <i class="fal fa-history icon-2"></i> = <strong>opacity</strong> set to 0.5
</div>
<div class="green parent">
  <i class="fal fa-history icon-1"></i> = no opacity |
  <i class="fal fa-history icon-3"></i> = <strong>opacity</strong> set to 0.4
</div>
<div class="lightblue parent">
  <i class="fal fa-history icon-1"></i> = no opacity |
  <i class="fal fa-history icon-4"></i> = <strong>opacity</strong> set to 0.3
</div>
<div class="orange parent">
  <i class="fal fa-history icon-1"></i> = no opacity |
  <i class="fal fa-history icon-5"></i> = <strong>opacity</strong> set to 0.2
</div>
<div class="yellow parent">
  <i class="fal fa-history icon-1"></i> = no opacity |
  <i class="fal fa-history icon-6"></i> = <strong>color</strong> set to <i>lightgrey</i>
</div>
<div class="fushcia parent">
  <i class="fal fa-history icon-1"></i> = no opacity |
  <i class="fal fa-history icon-6"></i> = <strong>color</strong> set to <i>lightgrey</i>
  </div>

有没有办法让更轻的字体很棒的图标？

Is there a way to make lighter font awesome icon?

html

css

font-awesome