Author: | nat-davydova |
---|---|
Views Total: | 590 views |
Official Page: | Go to website |
Last Update: | December 25, 2019 |
License: | MIT |
Preview:

Description:
8 flat style, retina-ready, fully scalable Christmas icons built with plain HTML and CSS.
Icons included:
- Gift
- Bell
- Santa
- Calendar
- Candle
- Snowman
- Face
- Cake
How to use it:
1. Download and import the style.css
into the document.
<link rel="stylesheet" href="./style.css" />
2. Embed Christmas icons into your webpage.
<!-- gift icon--> <div class="gift-icon icon"> <div class="gift-icon__ribbon"></div> <div class="gift-icon__top"></div> <div class="gift-icon__body"> <div class="gift-icon__body-ribbon"></div> </div> </div> <!-- bell icon--> <div class="bell-icon icon"> <div class="bell-icon__ribbon"> <div class="bell-icon__ribbon-left"></div> <div class="bell-icon__ribbon-middle"></div> <div class="bell-icon__ribbon-right"></div> </div> <div class="bell-icon__body"> <div class="bell-icon__body-top"></div> <div class="bell-icon__body-middle"></div> <div class="bell-icon__body-bottom"></div> </div> </div> <!-- santa icon --> <div class="santa-icon icon"> <div class="santa-icon__hat"> <div class="santa-icon__hat-top"></div> <div class="santa-icon__hat-middle"></div> <div class="santa-icon__hat-bottom"></div> </div> <div class="santa-icon__head"> <div class="santa-icon__head-beard"></div> <div class="santa-icon__head-ears"></div> <div class="santa-icon__head-face"> <div class="santa-icon__face-part"></div> <div class="santa-icon__face-part"></div> </div> </div> </div> <!-- calendar icon--> <div class="calendar-icon icon"> <div class="calendar-icon__holes"></div> <div class="calendar-icon__body"> </div> </div> <!-- candle icon--> <div class="candle-icon icon"> <div class="candle-icon__candle"> <div class="candle-icon__candle-flame"></div> <div class="candle-icon__candle-body"> <div class="candle-icon__candle-wax"> <div class="candle-icon__candle-wax-inner"></div> </div> </div> </div> <div class="candle-icon__sledge"> <div class="candle-icon__sledge-hold"></div> </div> </div> <!-- snowman icon--> <div class="snowman-icon icon"> <div class="snowman-icon__head"> <div class="snowman-icon__face"></div> </div> <div class="snowman-icon__body"></div> </div> <!-- face icon--> <div class="face-icon icon"> <div class="face-icon__hat"> <div class="face-icon__hat-top"> <div class="face-icon__hat-top-inner"></div> </div> <div class="face-icon__hat-bottom"></div> </div> <div class="face-icon__face"> <div class="face-icon__eyes"></div> <div class="face-icon__cheeks"></div> <div class="face-icon__smile"></div> </div> <div class="face-icon__ears"></div> </div> <!-- cake icon--> <div class="cake-icon icon"> <div class="cake-icon__cake"> <div class="cake-icon__cake-top"> <div class="cake-icon__cake-berry"></div> <div class="cake-icon__cake-cream"></div> </div> <div class="cake-icon__cake-body"> <div class="cake-icon__cake-decoration"></div> </div> </div> <div class="cake-icon__plate"></div> </div>