带有透明中间的堆叠字体真棒图标？

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 站点，select Font-awesome 库，然后根据需要 edit/add 心形图标并重新生成库。这是快速的解决方案，无需任何 CSS 技巧

Answer 3

我认为使用堆叠字体图标复制这种效果的最佳选择是使用 css mix-blend-mode 这将允许子元素有效地 'cut' 通过设置为 hard-light.

时的父项

我已经改编了 AWolf 的 fiddle 来使用这种技术，定位有点繁琐而且可能很笨拙，但有人可能知道一种更好的方法来将图标堆叠为父子图标

fiddle : https://jsfiddle.net/0hftugox/3/

带有透明中间的堆叠字体真棒图标？

Stacked font awesome icons with transparent middle?

html

css

font-awesome