堆叠式字体真棒图标与透明中间？

Question

反正有堆叠的字体真棒图标有透明的中间或边框吗？喜欢这张照片吗？会喜欢任何帮助，因为我完全难过。这是我想要的形象。再加上我的代码。

<span class="fa-stack fa-4x cool-span">
                      <i class="fa fa-circle fa-stack-2x icon-background4"></i>
                      <i class="fa fa-circle-thin fa-stack-2x icon-background6"></i>
                      <i class="fa fa-heart fa-stack-1x"></i>
                </span>

Answer 1

请检查这是否适合您，设置其不透明度将使其透明;

.fa.fa-heart { opacity : 0.1;  } /* Change the value to suit your need */

或使用rgba设置透明度

 .fa.fa-heart { color: rgba(0,0,0,0.1); }

Answer 2

转到iconmoon站点，选择Font-awesome库，然后根据需要编辑/添加心脏图标并重新生成库。这是快速的解决方案，没有做任何CSS技巧

Answer 3

我认为使用堆叠字体 - 真棒图标复制该效果最好的选择是使用css mix-blend-mode，这将允许子元素在设置为{{1时有效地“切割”父级}}

我已经改编了AWolf的小提琴来使用这种技巧，定位有点繁琐且可能很笨拙，但有人可能知道将图标叠加为父母和孩子的更好方法

小提琴：https://jsfiddle.net/0hftugox/3/