1
0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-24 14:52:54 +02:00

docs: add icon samples

This commit is contained in:
BcRikko
2019-02-23 11:48:26 +09:00
parent a17365b43d
commit 39103f7908
2 changed files with 115 additions and 0 deletions

View File

@@ -312,6 +312,117 @@ const sampleCollection = [
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>
<i class="nes-bcrikko"></i>
</section>`,
},
{
title: 'reaction-icons',
showCode: false,
description:
'If you wanto to change icon size, please use "is-small", "is-medium" and "is-large".',
code: `<section class="icon-list">
<!-- heart -->
<i class="nes-icon is-large heart"></i>
<i class="nes-icon is-large heart is-empty"></i>
<!-- star -->
<i class="nes-icon is-large star"></i>
<i class="nes-icon is-large star is-half"></i>
<i class="nes-icon is-large star is-transparent"></i>
<i class="nes-icon is-large star is-empty"></i>
<!-- like -->
<i class="nes-icon is-large like"></i>
<i class="nes-icon is-large like is-empty"></i>
</section>`,
},
{
title: 'sns-icons',
showCode: false,
description:
'If you wanto to change icon size, please use "is-small", "is-medium" and "is-large".',
code: `<section class="icon-list">
<!-- twitter -->
<i class="nes-icon twitter is-large"></i>
<!-- facebook -->
<i class="nes-icon facebook is-large"></i>
<!-- instagram -->
<i class="nes-icon instagram is-large"></i>
<!-- github -->
<i class="nes-icon github is-large"></i>
<!-- google -->
<i class="nes-icon google is-large"></i>
<!-- gmail -->
<i class="nes-icon gmail is-large"></i>
<!-- medium -->
<i class="nes-icon medium is-large"></i>
<!-- linkedin -->
<i class="nes-icon linkedin is-large"></i>
<!-- twitch -->
<i class="nes-icon twitch is-large"></i>
<!-- youtube -->
<i class="nes-icon youtube is-large"></i>
<!-- reddit -->
<i class="nes-icon reddit is-large"></i>
<!-- whatsapp -->
<i class="nes-icon whatsapp is-large"></i>
</section>`,
},
{
title: 'other-icons',
showCode: false,
description:
'If you wanto to change icon size, please use "is-small", "is-medium" and "is-large".',
code: `<section class="icon-list">
<!-- close -->
<i class="nes-icon close is-large"></i>
<!-- trophy -->
<i class="nes-icon trophy is-large"></i>
<!-- coin -->
<i class="nes-icon coin is-large"></i>
</section>`,
},
{
title: 'pixel-arts',
showCode: false,
description:
'Nintendo owns the copyright of some pixel arts. Therefore, these may be deleted.',
code: `<section class="icon-list">
<!-- controllers -->
<i class="nes-logo"></i>
<i class="nes-jp-logo"></i>
<i class="snes-logo"></i>
<i class="snes-jp-logo"></i>
<!-- octocat -->
<i class="nes-octocat animate"></i>
<!-- phone -->
<i class="nes-smartphone"></i>
<i class="nes-phone"></i>
<div class="blur-filter">
<!-- Copyright Nintendo -->
<i class="nes-mario"></i>
<i class="nes-ash"></i>
<i class="nes-pokeball"></i>
<i class="nes-bulbasaur"></i>
<i class="nes-charmander"></i>
<i class="nes-squirtle"></i>
<i class="nes-kirby"></i>
</div>
</section>`,
},
];