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;
 }

但似乎没有任何效果。我有可能做到这一点吗？

提前致谢

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

要使其更加稳固，请应用阴影两次：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

没有像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>

Answer 3

你必须附加-o 例如： fa fa-flag-o代替fa fa-flag

Answer 4

在CSS下方使用

-webkit-text-fill-color: transparent;
-webkit-text-stroke : black; // can be any color

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

4 个答案: