Getting Started with Font Awesome and NES.css (Part 2): Styling Pages and Icons with Nes.css

Hello everyone this is part two of our article on Font Awesome and NES.css. We are going to start off and get a quick overview of NES.css, then build some stuff just using NES.css. To get an idea of what you can do with this framework.Then we will put Font Awesome and NES.css together, and customize what we created.

To get started we will need to pull up the reference docs at:

https://nostalgic-css.github.io/NES.css/# .

Then open up our IDE and reference the CDN :

The first thing we are going to look at are buttons, to get started we will plug in a normal button from NES.css:

This will look like:

Next let’s look at some different option for colors on our button, we are going to create four buttons :

This will look like:

When we set a nes-button to is – “”, and use a predefined color name it changes our buttons. These are the four standard predefined button colors.

Next we are going to add some containers and see what the styles look like. The first container is going to be a white border with black background:

This is what it will create:

Next, we will create a black container:

Example:

Now we will look at icons. First, a coin icon that demonstrates some unique icons that are available with NES.css:

Result is a icon like this:

Now we will build the portfolio link icons:

This will create the below picture, it will line up thanks to break lines <br>:

Next, here’s the code to create a table :

Which will make this table:

This is the basic over view of NES.css. Next, we will show how you can edit how these with CSS. For an example, we will use our buttons and change the size using CSS. We will start with our button code:

Next we will add a width percentage to our buttons with CSS:

And our button will look like:

Then we will make it a little bit bigger :

And it will look like this:

Each time we increase the width using a percentage, it will increase the width in ratio to the total page width.

Now we are going to look at NES.css elements with Font Awesome icons. We will use the same examples as we did in the first part pretty much. This time they will be NES,css styled elements. Important note is that to get the text to look like NES text we have to use Google Fonts. To get started go to https://fonts.google.com/ then search for the Press Start 2P font. When you find it you will add it with the plus button here:

Then open the style box and you will find the CDN and how to style it in CSS:

Our CDN:

And to style this text to all text we use:

Ok this will give us the style that is important for this framework. Now we can start creating two buttons:

And this will create these buttons that have Font Awesome icons and NES.css :

Now we can make a Table:

This is how our table will look after we create it:

Then we will create a list:

Our list will look like this after we make it:

This gives you a basic idea of these two tools, and how you can customize your web pages with them. Remember the elements are CSS responsive, if you want icons that are a different color, or size,you can achieve that using CSS. Try different things and build awesome websites and games with your two new tools!

YouTube Video to this Tutorial:

CategoriesTags

Related Posts