Various snippets to add "Made with love" to your website using HTML, CSS and JavaScript

made-with-love.html

<!-- Example #1 - no styling -->
Made with ❤ in Switzerland
Made with ♥ in Switzerland
Made with ♡ in Switzerland
Made with ❤️ in Switzerland
Made with ♥️ in Switzerland

<!-- Example #2 - inline-styled ❤ -->
Made with <span style="color: #e25555;">&#9829;</span> in Switzerland
Made with <span style="color: #e25555;">&hearts;</span> in Switzerland

<!-- Example #3 - CSS-style class for ❤ -->
<style>.heart{color:#e25555;}</style>
Made with <span class="heart">♥</span> in Switzerland

<!-- Example #4 - external ♥-icon -->
<link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
Made with <i class="icon ion-heart"></i> in Switzerland
Made with <i class="icon ion-heart" style="color: #e25555;"></i> in Switzerland

<!-- Example #5 - inline svg (provided by FontAwesome) -->
Made with <svg viewBox="0 0 1792 1792" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" style="height: 0.8rem;"><path d="M896 1664q-26 0-44-18l-624-602q-10-8-27.5-26T145 952.5 77 855 23.5 734 0 596q0-220 127-344t351-124q62 0 126.5 21.5t120 58T820 276t76 68q36-36 76-68t95.5-68.5 120-58T1314 128q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z" fill="#e25555"></path></svg> in Switzerland

<!-- Example #6 - JavaScript Console log -->
<script>
console.info(
  'Made with %c♥%c in Switzerland',
  'color: #e25555', 'color: unset'
);
</script>

I'm not a CS major, could you explain how to make the heart in the first example? Is it just <3?

@Fredo-XVII the ❤ in the first example is actually the real Unicode char. You can copy it e.g. from http://unicodeheart.com

Thank you! :)

Thank you

Thanks a lot!!

Thank you totally what I needed

Thanks a lot

Thanks a lot

thank you

Thanks a lot

Beautiful

Thanks! I used example #2 btw

Thanks a lot

Simple and consist just like how everything should be!

Thank you so much !

Thanks!

Thanks for this

Thank you ❤

Thanks

Thanks a lot!

Rev. 5 update (968cdd2)

• Enhanced example 1 with Emojis (thanks @A7bert for the contribution)
• Added new Inline SVG example (thanks @bre7 for the contribution)

Rev. 7 update (968cdd2)

• Added new JavaScript console log example

Rev. 8 update (968cdd2)

• Added more Unicode chars to example 1

P.s.: these snippets are now also available directly within Nova.app for macOS: «Made with love»-clip extension

Love it, Thnx a lot, Hope near future get lots of snippet

Thankeee

Thank you so much!

PERFECTO!!! Great for a beginner in web design like myself.

Thx!

Thanks