More icons about nes.css HOT 17 CLOSED

I would recommend rounding the corners of that gmail logo a bit. It would match the actual logo better and be more in line with the style of all the others you've created

from nes.css.

What do you guys think of this? Not sure if it's ok.

This supposed to be a youtube icon.

from nes.css.

Like this 😆

$icon-linkedin: (
  (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,1,1,1,2,1,1,1,2,2,2),
  (2,2,1,1,1,2,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,1,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
  (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
);

Would it be better not to resemble the image just before? 🤔
because this Image is not free... 😢

from nes.css.

Like this 😆

$icon-linkedin: (
  (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
  (2,2,1,1,1,2,1,1,1,2,1,1,1,2,2,2),
  (2,2,1,1,1,2,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,1,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,2,1,1,1,2,2,1,1,1,2,2),
  (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
  (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
);

Would it be better not to resemble the image just before? 🤔
because this Image is charged... 😢

This looks better than mine, when you can add this icon ok 👍

from nes.css.

Good 👍

I fixed it a little bit. 🛠

$icon-gmail-colors: (#eeecec, #fd2b2b);
// prettier-ignore
$icon-gmail: (
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
  (2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2),
  (2,2,2,2,1,1,1,1,1,1,1,1,2,2,2,2),
  (2,2,1,2,2,1,1,1,1,1,1,2,2,1,2,2),
  (2,2,1,1,2,2,1,1,1,1,2,2,1,1,2,2),
  (2,2,1,1,1,2,2,1,1,2,2,1,1,1,2,2),
  (2,2,1,1,1,1,2,2,2,2,1,1,1,1,2,2),
  (2,2,1,1,1,1,1,2,2,1,1,1,1,1,2,2),
  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
  (2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2),
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
);

from nes.css.

🎉 This issue has been resolved in version 1.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from nes.css.

@JMGama They are made using the box-shadow property in CSS. Take a look at the source code for examples on how the current ones are made :)

Also not sure how @BcRikko feels about adding icons? I have just built a Medium icon and think it would be nice to have.

from nes.css.

This linkedin one looks a lot uglier but not sure how to improve it.

from nes.css.

1. create icon matrix and color list( like this )
2. import {youricon}.scss into icons.scss
3. Define a css class ( like this )
4. add example icon to index.html
5. build css ( npm run build )

I think that it will be showing. 🤔

from nes.css.

This issue is to vague, I would like to add a phone icon and close this issue, we'll always accept icons. We're working on NES.icons for that.

from nes.css.

You can make icon as below 🛠

// color list
$icon-like-colors: (#fff, #333, #2e77be);

// Numbers represent the position and color of pixel.
//    0: transparent
//    1: First color of $icon-like-colors (in this case, #fff)
//    2: Second color of $icon-like-colors (in this case, #333)
//    3: Third color of $icon-like-colors (in this case, #2e77be)
$icon-like: (
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
  (0,0,0,0,0,0,0,2,2,0,0,0,0,0,0,0),
  (0,0,0,0,0,0,0,2,1,2,0,0,0,0,0,0),
  (0,0,0,0,0,0,0,2,1,2,0,0,0,0,0,0),
  (0,0,0,0,0,0,2,1,1,2,0,0,0,0,0,0),
  (0,0,0,0,0,0,2,1,1,2,2,2,2,2,2,0),
  (0,0,0,0,0,2,1,1,1,1,1,1,1,1,1,2)
....

Please refer to below.

• https://github.com/BcRikko/NES.css/blob/master/scss/icons/icons.scss
• https://github.com/BcRikko/NES.css/blob/master/scss/icons/like.scss

from nes.css.

I welcome adding icons 👍

but The icon increases the size of CSS file. 😭
so I might divide the icons into different project -> #59

from nes.css.

💯 🙆 🎉

from nes.css.

@guastallaigor How is this? 🤔
https://www.brik.co/blogs/pixel-art/linkedin-pixel-art-1

from nes.css.

Like this?

from nes.css.

I did the scss but don't understand what i need to change or add in the css 😞

from nes.css.

This is the Gmail icon i made 😄

$icon-gmail-colors: (#eeecec, #fd2b2b);
$icon-gmail: (
  ( 0,2,1,1,1,1,1,1,1,1,1,1,1,1,2,0 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 2,2,2,2,1,1,1,1,1,1,1,1,2,2,2,2 ),
  ( 2,2,2,2,2,1,1,1,1,1,1,2,2,2,2,2 ),
  ( 2,2,2,2,2,2,1,1,1,1,2,2,2,2,2,2 ),
  ( 2,2,2,1,2,2,2,1,1,2,2,2,1,2,2,2 ),
  ( 2,2,2,1,1,2,2,2,2,2,2,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,2,2,2,2,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,2,2,1,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 2,2,2,1,1,1,1,1,1,1,1,1,1,2,2,2 ),
  ( 0,2,2,1,1,1,1,1,1,1,1,1,1,2,2,0 )
);

from nes.css.