Gestapelte Schrift tolle Icons mit transparenten Mitte?

Gibt es sowieso eine gestapelte Schriftart, tolle Icons haben eine transparente Mitte oder Ränder? Wie in diesem Bild? Würde jede Hilfe lieben, weil ich völlig ratlos bin. Hier ist ein Bild von dem, was ich anstrebe. Plus mein Code. Gestapelte Schrift tolle Icons mit transparenten Mitte?

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

Quelle

2016-07-09 Pauline Orr

Es scheint, dass Gedy Rivera Social haben könnte, was Sie wollen https://css-tricks.com/flat-icons-icon-fonts/ –

Ich denke, Ihre beste Wette, um diesen Effekt mit gestapelten font-awesome Symbole zu replizieren wird es sein, css mix-blend-mode zu verwenden, die ein Kind Element effektiv "schneiden" durch die erlauben wird Eltern, wenn auf hard-light eingestellt.

ich die Geige aus awolf angepasst habe diese Technik zu verwenden, ist Positionierung ein wenig fummelig und möglicherweise Hacky aber jemand könnte einen besseren Weg kennt die Symbole als Eltern und Kind

Geige zu stapeln: https://jsfiddle.net/0hftugox/3/

Quelle

2016-07-21 12:42:15 jbaldwin

Bitte überprüfen Sie, ob dies für Sie arbeiten, seine Opazität Einstellung wird es transparent machen;

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

oder RGBA Transparenz setzen verwenden

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

Quelle

2016-07-09 23:13:30

Ja, Opazität ist ein guter Weg, um die Transparenz anzupassen, aber ich denke, es ist schwierig, den Effekt zu machen wie auf dem Bild. 100% transparentes Herz - sieht ein bisschen wie eine boolesche Subtraktion aus (weiß nicht, ob das in CSS möglich ist). Bitte werfen Sie einen Blick darauf [jsfiddle] (https://jsfiddle.net/awolf2904/0hftugox/). – AWolf

Versucht, dass aber das Herz oben auf einem Kreis gestapelt ist, also einmal transparent ist es nur ein Kreis. –

Zum iconmoon Website, wählen Sie die Font-awesome Bibliothek dann bearbeiten/fügen Sie das Herz-Symbol, wie Sie die Bibliothek wünschen und regenerieren. Es ist die schnelle Lösung und ohne irgendwelche CSS-Tricks

Quelle

2016-07-10 10:56:18 izodev

Gestapelte Schrift tolle Icons mit transparenten Mitte?

Antwort

Verwandte Themen