3 Layering and Masking snippets

InsanityMeetsHH edited this page 2018-11-21 17:58:24 +01:00

Table of Contents

• Adding a new snippet
• Snippets
• Bed in house (free)
• Bed in house (pro)
• Calender with clock
• Clock with arrow
• Email with cog
• File sharing
• File with lightbulb
• Info
• Insert Above / Below
• Marker with plus
• Phone on square
• Program Start / Stop
• Save icon set
• Search with plus
• Space shuttle launch
• Unisex
• User with pencil
• Voicemail
• Window search

You will find on this page a collection of layering and masking snippets.

This snippets required to have Font Awesome 5 SVG & JS framework.

Here is a collection of stacked icons by cherrador. (issue)

Adding a new snippet

• Snippet name
• Minimum Font Awesome version (e.g. 5.0.5 free)
• "by" user name
• Links (issues / demos)
• HTML snippet
• fa-layers is combined with fa-fw or icon has class fa-fw
• Horizontal line after each snippet
• Snippets are ordered alphabetical by snippet name

Snippets

Bed in house (free)

• 5.1.0 free
• by rent-is and InsanityMeetsHH
• issue
• demo

<span class="fa-layers fa-fw">
    <i class="fas fa-square-full" data-fa-mask="fas fa-warehouse" data-fa-transform="down-5"></i>
    <i class="fas fa-bed" data-fa-transform="shrink-6 down-2" ></i>
</span>

---

Bed in house (pro)

• 5.1.0 pro
• by rent-is and InsanityMeetsHH
• issue

<span class="fa-layers fa-fw">
    <i class="fas fa-square-full" data-fa-mask="fal fa-warehouse" data-fa-transform="down-5"></i>
    <i class="fal fa-bed" data-fa-transform="shrink-6 down-2" ></i>
</span>

---

Calender with clock

• 5.0.0 free
• by tagliala
• issue 1, issue 2
• demo

<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-transform="shrink-7 down-6 right-6" data-fa-mask="fas fa-calendar-alt"></i>
    <i class="far fa-clock" data-fa-transform="shrink-8 down-6 right-6"></i>
</span>

---

Clock with arrow

• 5.0.0 free
• by tagliala
• issue
• demo

<span class="fa-layers fa-fw">
    <i class="fas fa-clock" data-fa-transform="left-4"></i>
    <i class="fas fa-long-arrow-alt-up" data-fa-transform="right-9"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-clock" data-fa-transform="left-4"></i>
    <i class="fas fa-long-arrow-alt-down" data-fa-transform="right-9"></i>
</span>

---

Email with cog

• 5.0.0 free
• by tagliala
• issue
• demo

<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-mask="fas fa-envelope" data-fa-transform="shrink-4 down-4 right-7"></i>
    <i class="fas fa-cog" data-fa-transform="shrink-7 down-4 right-7"></i>
</span>

---

File sharing

• 5.0.0 free
• by InsanityMeetsHH
• demo

<i class="fas fa-share-alt fa-fw" data-fa-mask="fas fa-file" data-fa-transform="shrink-7 down-2.5"></i>

---

File with lightbulb

• 5.3.0 free
• by tagliala
• issue
• demo

<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-mask="fas fa-file" data-fa-transform="shrink-3 down-2.5 left-4.5"></i>
    <i class="fas fa-lightbulb" data-fa-transform="shrink-1 down-5 left-5"></i>
</span>

---

Info

• 5.0.0 free
• by tagliala and InsanityMeetsHH
• issue
• demo 1, demo 2

<span class="fa-layers fa-fw">
    <i class="fas fa-circle"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-3" style="font-weight:900; font-style: italic">i</span>
</span>

<span class="fa-layers fa-fw">
    <i class="far fa-circle"></i>
    <i class="fas fa-info" data-fa-transform="shrink-6"></i>
</span>

<span class="fa-stack">
    <i class="far fa-circle fa-stack-2x"></i>
    <i class="fas fa-info fa-stack-1x"></i>
</span>

---

Insert Above / Below

• 5.0.0 free
• by CTiedeman
• issue
• demo

<span class="fa-layers fa-fw">
    <i class="fas fa-minus" data-fa-transform="shrink-4 up-6 right-4"></i>
    <i class="fas fa-reply" data-fa-transform="shrink-5 up-1 left-6 flip-h"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 down-2 right-4" style="color:blue"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 down-6 right-4"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-minus" data-fa-transform="shrink-4 up-6 right-4"></i>
    <i class="fas fa-reply" data-fa-transform="shrink-5 down-1 left-6 flip-v flip-h"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 up-2 right-4" style="color:blue"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 down-6 right-4"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-minus" data-fa-transform="shrink-4 up-6 left-4"></i>
    <i class="fas fa-reply" data-fa-transform="shrink-5 up-1 right-6"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 down-2 left-4" style="color:blue"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 down-6 left-4"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-minus" data-fa-transform="shrink-4 up-6 left-4"></i>
    <i class="fas fa-reply" data-fa-transform="shrink-5 down-1 right-6 flip-v"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 up-2 left-4" style="color:blue"></i>
    <i class="fas fa-minus" data-fa-transform="shrink-4 down-6 left-4"></i>
</span>

---

Marker with plus

• 5.0.0 free
• by tagliala
• issue
• demo

<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-mask="fas fa-map-marker-alt" data-fa-transform="shrink-5 down-4 right-5"></i>
    <i class="fas fa-plus" data-fa-transform="shrink-7 down-4 right-5"></i>
</span>

---

Phone on square

• 5.0.0 free
• by marcoroth and InsanityMeetsHH
• issue
• demo

<span class="fa-layers fa-fw">
    <i class="fas fa-square"></i>
    <i class="fas fa-mobile-alt fa-inverse" data-fa-transform="shrink-6"></i>
</span>

<i class="fas fa-mobile-alt fa-fw" data-fa-mask="fas fa-square" data-fa-transform="shrink-6"></i>

---

Program Start / Stop

• 5.0.0 free
• by InsanityMeetsHH
• issue
• demo

<span class="fa-layers fa-fw">
    <i class="fas fa-minus" data-fa-transform="rotate-45 shrink-5 left-3 down-3"></i>
    <i class="fas fa-minus" data-fa-transform="rotate-135 shrink-5 right-3 down-3"></i>
    <i class="fas fa-minus" data-fa-transform="rotate-45 shrink-5 right-3 up-3"></i>
    <i class="fas fa-minus" data-fa-transform="rotate-135 shrink-5 left-3 up-3"></i>
    <i class="fas fa-minus" data-fa-transform="rotate-90 shrink-8"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="far fa-circle" data-fa-transform=""></i>
    <i class="fas fa-minus" data-fa-transform="rotate-60 shrink-5 left-2 down-1.65"></i>
    <i class="fas fa-minus" data-fa-transform="rotate-120 shrink-5 right-2 down-1.65"></i>
    <i class="fas fa-minus" data-fa-transform="rotate-180 shrink-4 up-2.65"></i>
</span>

---

Save icon set

• 5.0.13 free
• by InsanityMeetsHH
• issue
• demo

<i class="fas fa-save fa-fw"></i>

<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-transform="shrink-10 down-5 right-5" data-fa-mask="fas fa-save"></i>
    <i class="fas fa-times" data-fa-transform="shrink-12 down-5 right-5"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-transform="shrink-10 down-5 right-5" data-fa-mask="fas fa-save"></i>
    <i class="fas fa-check" data-fa-transform="shrink-12 down-5 right-5"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-transform="shrink-10 down-5 right-5" data-fa-mask="fas fa-save"></i>
    <i class="fas fa-arrow-down" data-fa-transform="shrink-12 down-5 right-5"></i>
</span>

<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-transform="shrink-10 down-5 right-5" data-fa-mask="fas fa-save"></i>
    <i class="fas fa-arrow-up" data-fa-transform="shrink-12 down-5 right-5"></i>
</span>

---

Search with plus

• 5.0.0 free
• by tagliala
• issue
• demo

<span class="fa-layers fa-fw">
    <i class="fas fa-search"></i>
    <i class="fas fa-plus" data-fa-transform="shrink-6 down-2 right-10"></i>
</span>

---

Space shuttle launch

• 5.0.0 free
• by InsanityMeetsHH
• demo

<span class="fa-layers fa-fw">
    <i class="fab fa-gripfire" data-fa-transform="down-4 shrink-8 rotate-180" style="color: tomato;"></i>
    <i class="fas fa-space-shuttle" data-fa-transform="up-3 shrink-8 rotate-270" ></i>
</span>

---

Unisex

• 5.0.5 free
• by tagliala
• issue
• demo

<span class="fa-layers fa-fw">
    <i class="fas fa-square-full" data-fa-transform="shrink-4.5 down-2.25 right-5.35" data-fa-mask="fas fa-male"></i>
    <i class="fas fa-square-full" data-fa-transform="shrink-4.5 down-2.25 left-5.35" data-fa-mask="fas fa-female"></i>
</span>

---

User with pencil

• 5.0.11 free
• by tagliala
• issue
• demo

<span class="fa-layers fa-fw">
    <i class="fas fa-pencil-alt" data-fa-transform="shrink-8 down-6 right-6" data-fa-mask="fas fa-user"></i>
    <i class="fas fa-pencil-alt" data-fa-transform="shrink-9 down-6 right-6"></i>
</span>

---

Voicemail

• 5.0.9 free
• by GabrielBuenoOliveira
• issue
• demo

<span class="fa-layers fa-fw">
    <i class="fas fa-tape fa-flip-horizontal" data-fa-transform="right-5 shrink-3" ></i>
    <i class="fas fa-tape" data-fa-transform="left-5 shrink-3" ></i>  
</span>

---

Window search

• 5.0.0 free
• by tagliala
• issue
• demo

<span class="fa-layers fa-fw">
   <i class="fas fa-circle" data-fa-transform="shrink-6 down-5 right-6" data-fa-mask="far fa-window-maximize"></i>
   <i class="fas fa-search" data-fa-transform="shrink-8 down-5 right-6"></i>
</span>

---