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 :

<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />

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

<a class="nes-btn">Normal</a>

This will look like:

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

<button type="button" class="nes-btn is-primary">Primary</button>
<button type="button" class="nes-btn is-success">Success</button>
<button type="button" class="nes-btn is-warning">Warning</button>
<button type="button" class="nes-btn is-error">Error</button>

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:

<div class="nes-container is-rounded is-dark">
  <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>

This is what it will create:

Next, we will create a black container:

<div class="nes-container is-rounded is-dark">
  <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>

Example:

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

<i class="nes-icon coin is-large"></i>

Result is a icon like this:

Now we will build the portfolio link icons:

<i class="nes-icon twitter is-large"></i>
<br>
<i class="nes-icon github is-large"></i>
<br>
<i class="nes-icon gmail is-large"></i>
<br>
<i class="nes-icon linkedin is-large"></i>

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

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

<div class="nes-table-responsive">
  <table class="nes-table is-bordered is-dark">
    <thead>
      <tr>
        <th>Table.is-dark</th>
        <th>Table.is-bordered</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Thou hast had a good morning</td>
        <td>Thou hast had a good afternon</td>
      </tr>
      <tr>
        <td>Thou hast had a good morning</td>
        <td>Thou hast had a good afternoon</td>
      </tr>
    </tbody>
  </table>
</div>

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:

<a class="nes-btn">Normal</a>
<button type="button" class="nes-btn is-primary">Primary</button>
<button type="button" class="nes-btn is-success">Success</button>
<button type="button" class="nes-btn is-warning">Warning</button>
<button type="button" class="nes-btn is-error">Error</button>

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

button {
    width: 50%;
}

And our button will look like:

Then we will make it a little bit bigger :

button {
    width: 90%;
}

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:

<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">

And to style this text to all text we use:

body {
 font-family: 'Press Start 2P', cursive;
}

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

<button type="button" class="nes-btn"><i class="fab fa-empire"></i> Primary <i class="fab fa-empire"></i></button>
<button type="button" class="nes-btn is-success"><i class="fab fa-rebel"></i> Success <i class="fab fa-rebel"></i></button>

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

Now we can make a Table:

<div class="nes-table-responsive">
    <table class="nes-table is-bordered is-centered">
      <thead>
        <tr>
          <th><i class="fab fa-fort-awesome"></i> Table.is-bordered </th>
          <th>Table.is<i class="fab fa-fort-awesome"></i>-centered</th>
          <th>Table.is-centered</th>
          <th>Table.is-centered</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Thou hast had a good morning</td>
          <td>Thou hast had a good afternoon</td>
          <td>Thou hast had a good evening</td>
          <td>Thou hast had a good night</td>
        </tr>
        <tr>
          <td>Thou hast had a good morning</td>
          <td>Thou hast had a good afternoon</td>
          <td>Thou hast had a good evening</td>
          <td>Thou hast had a good night</td>
        </tr>
      </tbody>
    </table>
  </div>

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

Then we will create a list:

<div class="lists">
    <ul class="nes-list">
      <p><i class="fab fa-twitter-square"></i> Good morning.</p>
      <p><i class="fab fa-github-square"></i> Thou hast had a good night's sleep, I hope.</p>
      <p><i class="fas fa-mail-bulk"></i> Thou hast had a good afternoon</p>
      <p><i class="fab fa-linkedin"></i> Good night.</p>
    </ul>
  </div>

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:

Related Posts