如何只显示 Font Awesome 图标的轮廓？

Question

我正在使用来自 FA http://fontawesome.io/icon/tag/ 的标签图标，我想做的是只显示它的轮廓（红色）并使内部透明。 fa-tag-o 不起作用。我也试过 fa-tag-empty 和CSS之类的

.fa{
   color: transparent;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: red;
 }

但似乎没有任何效果。有什么办法可以做到这一点？

提前致谢

原文由 L.D 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

没有像 fa-tag-o 这样的标签你可以使用 fa-tag 或 fa-tags 你的代码工作正常..你可以使用翻转你可以使用旋转你可以制作你自己的自定义 css tor fa-tag 就像我定制的一样第二个 fa-custom livefiddle fa-4x 的类在这里 x 表示 em 所以 fa-4x 表示 fa size 4em 。

 .fa.fa-tag{
   color: transparent;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: red;
 }
.fa.custom-fa{
 font-size:12em;
 -webkit-text-stroke-color: blue;
color:transparent;
}

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"  rel="stylesheet"/>
<i class="fa fa-tag fa-rotate-90 fa-4x" aria-hidden="true"></i><br><br>

<i class="fa fa-tag fa-flip-horizontal custom-fa" aria-hidden="true"></i>

原文由 Baezid Mostafa 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你事先知道背景颜色，你可以使用 text-shadow ，并将图标的颜色设置为背景颜色。

 .fa-tag {
  text-shadow: 0px 0px 1px red;
  color: white;
}

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<i class="fa fa-tag fa-flip-horizontal fa-lg" aria-hidden="true"></i>

为了使它更坚实，应用阴影两次：

 .fa-tag {
  text-shadow: 0px 0px 1px red, 0px 0px 1px red;
  color: white;
}

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<i class="fa fa-tag fa-flip-horizontal fa-lg" aria-hidden="true"></i>

原文由 Ori Drori 发布，翻译遵循 CC BY-SA 3.0 许可协议