diff --git a/Layering-and-Masking-snippets.md b/Layering-and-Masking-snippets.md new file mode 100644 index 0000000..80d919e --- /dev/null +++ b/Layering-and-Masking-snippets.md @@ -0,0 +1,341 @@ +# Layering and Masking snippets + +You will find on this page a collection of [layering](https://fontawesome.com/how-to-use/on-the-web/styling/layering) and [masking](https://fontawesome.com/how-to-use/on-the-web/styling/masking) snippets. + +This snippets required to have Font Awesome 5 SVG & JS framework. + +Here a collection of [stacked icons](https://jsfiddle.net/cherrador/jomgLb2h/) by [cherrador](https://github.com/cherrador). ([issue](https://github.com/FortAwesome/Font-Awesome/issues/1446#issuecomment-190011020)) + +## 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](https://github.com/rent-is) and [InsanityMeetsHH](https://github.com/InsanityMeetsHH) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/13812) +- [demo](https://codepen.io/anon/pen/NEXxdV) + +```html + + + + +``` + +------------ + +### **Bed in house (pro)** +- 5.1.0 pro +- By [rent-is](https://github.com/rent-is) and [InsanityMeetsHH](https://github.com/InsanityMeetsHH) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/13812) + +```html + + + + +``` + +------------ + +### **Calender with clock** +- 5.0.0 free +- By [tagliala](https://github.com/tagliala) +- [issue 1](https://github.com/FortAwesome/Font-Awesome/issues/8158), [issue 2](https://github.com/FortAwesome/Font-Awesome/issues/14238) +- [demo](https://codepen.io/anon/pen/WYwyLz) + +```html + + + + +``` + +------------ + +### **Clock with arrow** +- 5.0.0 free +- By [tagliala](https://github.com/tagliala) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/12389) +- [demo](https://jsfiddle.net/tagliala/vLae8ted/60/) + +```html + + + + + + + + + +``` + +------------ + +### **Email with cog** +- 5.0.0 free +- By [tagliala](https://github.com/tagliala) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/14135) +- [demo](http://jsfiddle.net/tagliala/mfopk9qe/7/) + +```html + + + + +``` + +------------ + +### **File sharing** +- 5.0.0 free +- By [InsanityMeetsHH](https://github.com/InsanityMeetsHH) +- [demo](https://codepen.io/anon/pen/vQpLZr) + +```html + +``` + +------------ + +### **File with lightbulb** +- 5.3.0 free +- By [tagliala](https://github.com/tagliala) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/13672) +- [demo](http://jsfiddle.net/tagliala/9tercwpy/28/) + +```html + + + + +``` + +------------ + +### **Info** +- 5.0.0 free +- By [tagliala](https://github.com/tagliala) and [InsanityMeetsHH](https://github.com/InsanityMeetsHH) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/3114) +- [demo 1](https://jsfiddle.net/tagliala/qu83xrwp/16/), [demo 2](https://codepen.io/anon/pen/RqxrLY) + +```html + + + i + + + + + + + + + + + +``` + +------------ + +### **Insert Above / Below** +- 5.0.0 free +- By [CTiedeman](https://github.com/CTiedeman) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/13863) +- [demo](https://codepen.io/ctiedeman/pen/zJNmRL) + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +------------ + +### **Marker with plus** +- 5.0.0 free +- By [tagliala](https://github.com/tagliala) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/14135) +- [demo](https://jsfiddle.net/tagliala/mfopk9qe/4/) + +```html + + + + +``` + +------------ + +### **Phone on square** +- 5.0.0 free +- By [marcoroth](https://github.com/marcoroth) and [InsanityMeetsHH](https://github.com/InsanityMeetsHH) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/11823) +- [demo](https://codepen.io/anon/pen/NEXxYK) + +```html + + + + + + +``` + +------------ + +### **Save icon set** +- 5.0.13 free +- By [InsanityMeetsHH](https://github.com/InsanityMeetsHH) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/14152) +- [demo](https://codepen.io/anon/pen/ePjMBo) + +```html + + + + + + + + + + + + + + + + + + + + + +``` + +------------ + +### **Search with plus** +- 5.0.0 free +- By [tagliala](https://github.com/tagliala) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/12445) +- [demo](https://jsfiddle.net/vLae8ted/79/) + +```html + + + + +``` + +------------ + +### **Space shuttle launch** +- 5.0.0 free +- By [InsanityMeetsHH](https://github.com/InsanityMeetsHH) +- [demo](https://codepen.io/anon/pen/XyVXqM) + +```html + + + + +``` + +------------ + +### **Unisex** +- 5.0.5 free +- By [tagliala](https://github.com/tagliala) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/14281) +- [demo](https://jsfiddle.net/tagliala/wks0e6pa/7/) + +```html + + + + +``` + +------------ + +### **User with pencil** +- 5.0.11 free +- By [tagliala](https://github.com/tagliala) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/1181#issuecomment-350016641) +- [demo](https://jsfiddle.net/tagliala/8oqL3b5p/) + +```html + + + + +``` + +------------ + +### **Voicemail** +- 5.0.9 free +- By [GabrielBuenoOliveira](https://github.com/GabrielBuenoOliveira) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/2637) +- [demo](https://codepen.io/anon/pen/RqxrBq) + +```html + + + + +``` + +------------ + +### **Window search** +- 5.0.0 free +- By [tagliala](https://github.com/tagliala) +- [issue](https://github.com/FortAwesome/Font-Awesome/issues/13595) +- [demo](https://jsfiddle.net/tagliala/ydq3jrne/51/) + +```html + + + + +``` + +------------