-
Notifications
You must be signed in to change notification settings - Fork 12.2k
Layering and Masking snippets
InsanityMeetsHH edited this page Nov 20, 2018
·
3 revisions
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 a collection of stacked icons by cherrador. (issue)
- Snippet name
- Minimum Font Awesome version (e.g. 5.0.5 free)
- "By" user name
- Links (issues / demos)
- HTML snippet
-
fa-layers
is combined withfa-fw
or icon has classfa-fw
- Horizontal line after each snippet
- Snippets are ordered alphabetical by snippet name
- 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>
- 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>
<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>
<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>
<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>
- 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>
<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>
- 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>
<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>
<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>
- 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>
- 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>
<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>
- 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>
<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>
<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>
- 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>
<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>