Getting Started with Font Awesome and NES.css (Part 1): How to Create Icons with Font Awesome

In this article, we are going to cover features and give a basic overview of NES.css framework and Font Awesome. We will be using the Font Awesome website: https://fontawesome.com and the framework NES.css on GitHub: https://nostalgic-css.github.io/NES.css/#. We are going to start with what Font Awesome is and then move to what we can do with this tool.

Font Awesome is an online icon database that links to your code using a CDN similar to Google Fonts or Bootstrap. There are two options once you get to their page free or pro. With the free option you can use 1,500 icons. If you upgrade to pro you will have 5,082. You can sort icons using their type, so if you’re looking for an animal icon you click on that tab, and it will load all of the available animal icons. There are tabs for medical, automotive, etc. Font Awesome has tags for just about anything. I find a new icon pretty much anytime I use Font Awesome, and save it for later. This is the basic overview of Font Awesome, so now we can talk about what we can do with Font Awesome.

To get started you will add the CDN to your HTML page:

After we get this into our IDE we can add icons to our page. Icons on Font Awesome, are in a <i> tag, which allows us to put these icons almost anywhere in the web page. The examples we are going to cover are how to use icons in buttons, tables, lists, and just divs, or containers.

Starting off, we will jump into buttons. To start off you add a button to your page, just a simple <button> tag. Then you will take the icon <i> tag and put it in your <button>. You want to place the <i> next to the text of your button (example: “Click Here”.) Whatever side you put your <i> on is the side it will show up on. If you want two, you just put two <i>’s in the <button>( note: if you don’t add a space it will touch your text inside the button,) two icons with space is what I did for the example. It will look like this coded:

This will look like this on your web page:  

This is the basic concept of adding icons to a button, you can customize them more using CSS, and even use CSS frameworks like NES.css to really customize how your buttons look (we will cover that later, in our NES.css section.)

Now we are going to move on to using an icon in a table. First step is putting a table into your page:

Next, we will add an icon to our first header of our table. We are just going to put one icon next to it, so we get an idea of what it looks like; and more options we can utilize in or icons. We will paste our <i> next to the text of the header:

Which will look like this:

Next, we will add another icon, demonstrate how customizable these icon placements can be, and place one in the middle of a sentence:

This adds a castle in the middle of our text:

Next, we are going to work on making a list and adding icons for each bullet point. We just add a basic list to our HTML:

This will just make a normal list with bullet points:

Next we add our icon bullets; for this example we will use a Twitter, GitHub, Email, and LinkedIn icon. This will show us how to build a social media contact list on our portfolio page and how to build a list with icons as our bullet-points. Our code will look like this:

Our list will look like below:

Next, we will add links next to our icons so you can see how to create a link to your personal social media accounts. To add a link, we will create <a> anchor tags. To accomplish this we just add an <a> to our text that we want to be able to have users click on and be forwarded to our page. For example, we add a <a> linking to Twitter next to our text; that is corresponding to our Twitter icon, and we also will follow this step for our GitHub. (note you will want to have your hrefs go to your personal social media pages not just the main site. Also, we changed “Good Morning to “Twitter”, and “Thou hast had a good night’s sleep, I hope.” To “GitHub”.)

Code:

It will create this list:

Notice the links are clickable. Thanks for checking out the article. This is part one, of two. In our next article “Styling Pages and Icons with NES.css” we will show examples of what you can create with NES.css. Then we will take it up a notch and create a page using both of our tools together!

YouTube Video to this Tutorial:

CategoriesTags

Related Posts