Icon Fonts (by Crystal Petersen)

designfreebies-icon-fonts-15

What Are Icon Fonts Anyways?

Icon fonts are simply fonts you display on your webpage just like any other font. The difference is icon fonts have symbols as characters instead of the traditional ABC alphabet you’re used to.

Using icon fonts can be pretty great for a couple of reasons. First of all, websites love them because they load a ton faster than linked pictures, speeding up overall loading times. They can also be styled with CSS just like any other font can. You can quickly and easily change the size and color, even add drop shadows or gradients if you’re feeling fancy. All the symbols in icon fonts are also vector graphics, which means you don’t have to worry about losing any quality as you size them up and down. They’re even supported in all browsers. So your site can maintain it’s cohesive design even in Internet Explorer!

However, using icon fonts isn’t the best choice for every graphic your page might contain. They’re generally pretty simple, so any complex graphics you have in mind will still have to rely on linked image files. Despite this limitation, icon fonts are a great resource for situations needing to display information in a simple and quick way.

There’s two hugely popular sets of icon fonts commonly used today - Font Awesome and IcoMoon. The two differ in how they’re added to your code, and both have their advantages and disadvantages for various situations.
Before we get started, go ahead and create a new HTML document with the basic generic structure and name it “iconfonts.html."

FONTAWESOME

With a name like Font Awesome, there’s a lot expected from this first icon font. No worries, however, Font Awesome certainly lives up to its inflated name.

There’s a few ways to install Font Awesome and use it on your site, but today we’re going to go with the one of the easiest routes by linking directly to the file online.

  1. First, copy and place the link below between your header tags:
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  2. To use Font Awesome icons, you have to place them within a <span> or an <i> element. You must then assign them two classes depending on how you want them to look. The first class you will assign will be the fa-class. The second will be the name of the icon you want to use. For example, if I wanted to add a camera icon to my page, the resulting code would look something like this:
    <i class="fa fa-camera">

    Go ahead and add that line of code to your HTML document and check out the camera icon in your browser. Pretty awesome, right? For a complete list of all available icons and their tags, you can check out:

http://fortawesome.github.io/Font-Awesome/icons/

That’s Cool, but How Can I Customize These Icons?

Font Awesome has included a ton of different ways to customize the icons already in the CSS file you just downloaded. One easy way to begin is by making the icons larger by adding “fa-lg” to the icon’s tag. Your camera icon’s tag will now look something like this: <i class="fa fa-camera fa-lg"></i>

As you can see, that made the icon a bit bigger, but not by much. To really customize the icon’s size, you can substitute the “lg” with a number from 1 to 5 plus x. So, for example, if I wanted my camera icon even bigger, the code would now look like: <i class="fa fa-camera fa-5x"></i>

That’s the biggest you can get the icon using Font Awesome’s built in CSS, but of course you can create your own CSS and continue to increase the camera’s size if you wish.

Another cool trick included in Font Awesome is the ability to stack icons. For example, if I wanted to use the icon for Apple, but I wanted it to be in a circle, I could simply stack the two on top of each other using “fa-stack”. Delete the code that calls for the camera icon and replace it with the following:

<span class=”fa-stack fa-lg”>
<i class=”fa fa-circle-o fa-stack-2x”></i>
<i class=”fa fa-apple fa-stack-1x”></i>
</span>

Now you have the Apple logo inside a circle, and it can be made clickable or kept purely decorative.

One final benefit to Font Awesome is the built in animation feature. This is used mostly for the loading icons, but with a little imagination it can be implemented almost anywhere. To utilize this cool feature, you simply have to add either “fa-spin” or “fa-pulse” to your icon’s class. “fa-spin” will cause the icon to endlessly rotate, while “fa-pulse” will rotate with 8 separate steps. To check it out, delete the apple logo we just stacked, and add the necessary code to call the icon “fa-spin” twice- once to make it spin and once to see it pulse.

If you’re having trouble, your finished code should look pretty close to this:

<i class="fa fa-spinner fa-spin fa-4x"></i>
<i class="fa fa-spinner fa-pulse fa-4x"></i>

The resulting effect is pretty cool looking, plus it doesn’t slow down the page’s loading time like alternative animation methods would.

ICOMOON

IcoMoon is available in both a free and premium version. In addition, IcoMoon provides an online app that allows you to curate your own selection of icons to download from over 3500 different options! We’re going to be working with the free pack already curated for us, but be sure to keep the huge icon repository in mind for any future projects. You can also import your own icons to create your own icon font if you really want to customize things.  Follow this link and download the free version of the default pack:

https://icomoon.io/#icons-icomoon

Despite being a free pack, the download gives you 450 icons in a myriad of different formats for any need you may ever have for icons. You even get individualized eps files for every single icon so you can edit them even further in your choice of graphics program. Most importantly for us, however, is the font format of IcoMoon and it’s accompanying HTML file reference page.

What You Have to Know to Use IcoMoon

Since IcoMoon is downloaded as an actual icon font, you have to make sure your document links to the correct folder to use it. You can do this by adding the following code in the same place you’d link to any other font.

@font-face {
font-family: ‘icomoon’;
src: url(‘Font/IcoMoon-Free.ttf’)
}

However, lucky for you, the font comes with its own stylesheet inside the demo-files folder. So go ahead and open that up and take a look at the code. Make sure you link to the new stylesheet from your original html document.

Let’s call some icons.

Like Font Awesome, Icomoon requires you to place it inside a span element. In addition to the required span element, you also have to assign a class so IcoMoon knows which icon to call. You can find the names of each icon in the reference.html document that downloaded with the font. Directly under the place where the css document calls the font, you will see a span class already created named icon. Go check that out and try to call an icon in your document.

If you’re having trouble, first be sure you deleted the line calling for the FontAwesome stylesheet. If you’re still having trouble, this is what your code should look like to call the pencil icon:

<span class="icon icon-pencil"></span>

These icons can be manipulated in the same ways as FontAwesome, so basically you’re limited only by your imagination.

 

Css Shapes by Crystal Petersen

1Screen Shot 2015-09-10 at 1.48.15 PMNow that you have dipped your toe into the CSS side of web development, you should be gaining an understanding of just how powerful CSS can be in making your site look how you want. One of the first things you learned was how to create simple squares and rectangles using div tags and the background-color attribute. While rectangles and squares are fundamentally useful in website creation, CSS can be further manipulated to render almost any shape. So with that, let’s take it a step further by using our existing CSS knowledge to transform your div boxes into any shape your heart desires.

The Square Gets an Upgrade.

To begin, head over to free.mynmi.net to download css_shapes.zip, unzip it and, as always, move the unzipped folder (new_shapes)  into the mysite folder.  Inside you will find two files, newshapes.css and newshapes.html  Open newshapes.html with Brackets and you should see that it is already linked to newshapes.css.  Now click on newshapes.css and take a look at the first div id listed, which is for “#square.”

Obviously, this is just a simple square, something you’re already familiar with. So go back to your HTML file and add in the code to make the square appear. Remember that the use of a hashtag creates an id rule (as opposed to a class which is designated with a dot), so your code should look similar to this:

<div id="square"></div>
<br><br>

The line breaks using the <br> tag serve to make the shapes easier for you to see once we begin to add other shapes. If you’re not careful and deliberate with your spacing, your custom shapes could end up all jumbled together.

Head back to your CSS file and take a look at the next div tag entitled “#parallelogram.” If you’re not already familiar with the shape of a parallelogram, it’s essentially just a slanted version of a square. We achieve this slanted with a CSS property called transform: skew. The transform property can be used to visually transform your elements in various ways, but for the purposes of our parallelogram, we will be focusing on skew. Skew makes it possible to stretch your element horizontally, and uses degrees to determine just how strong the effect will be.

Before adding the HTML to see  the shape, take a look at the CSS.  You’ll see the following two lines of code that you may or may not have already seen before:

-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);

The purpose of these two lines is to make the skew effect look the same across different internet browsers. The “moz-transform” targets the type of CSS recognized by Mozilla Firefox. The webkit focuses on browsers such as Chrome. It’s important to include both properties in your CSS to insure that your elements stay consistent across browsers.

Go back to your HTML file and call the div id for your parallelogram. Experiment with varying degrees to change the intensity, and see just how skewed the shape can become. Another thing that’s important to note with shapes that skew horizontally is the page’s padding or margin. If you’re not careful the shape can go outside of the body area. To see what I mean, scroll to the bottom of the CSS document and delete “body { margin: 50px; }” Go view your page and see what happened. Not pretty right? That’s why it’s important to be cognizant of how each element is interacting with the page.

Your Average Square is More Useful than you Think.

Now that you understand some of the ways you can manipulate a simple square to skew in a more interesting way, we’re going to move through the next two shapes pretty quickly. On your HTML document, call the div id’s for both “round” and “circle.” Looking at them on your web page, would you believe that the steps to create both of these styles are incredibly similar? They both utilize the border-radius property in varying intensities.

The border-radius property is essentially a way to round out the corners on your squares. The trick is being able to choose exactly how this property is applied. For rounded edges, just specify a pixel amount. The higher the pixel amount, the more rounded the square will be.

To create a perfectly round circle element, it’s often easier to move away from designating specific pixel numbers and instead take advantage of CSS’s ability to recognize percentages. Setting your border radius to 50% is an easy way to create a circle without doing any math or trying to guess pixels. This isn’t a fail-safe way to create circles however. Just like with everything, sometimes you’ll need to invest some time in trial and error to get it just right.

What if we Half a Square, Then What Happens??

Triangles. Triangles are what happen. To create the triangle shape, you must become familiar with the different ways to manipulate the border property. To form a triangle, you essentially want a box with zero width or height. The actual height of the triangle is determined by the width of the border.

Go back and look at your CSS file under “#triangle”.  You’ll see the left and right borders are actually transparent, and that the width and height are indeed zero. The border property is broken up into border-left, border-right and border-bottom to individually manipulate each side. Notice the border-bottom property is the only one with a specified color. This determines the way the triangle faces. Go add the div ID necessary to see this triangle, and you’ll notice that ours is facing upwards. Swap the color and transparency from the border-bottom property to the border-right and see what happens. The triangle points in a different direction. The pixel amount specified will control the overall size of each leg your triangle.  

This may seem like some kind of CSS voodoo but there is actually a straightforward explanation; although it can be hard to wrap your head around it and it's hard to explain. To see an explanatory animation, click here.

2

Compound Shapes

Not only can CSS be manipulated to create nearly any shape, but those shapes can be put together to create even more interesting compositions. To see what I mean, visit http://species-in-pieces.com/ to see an amazing example of animals created using only CSS.

We won’t be doing anything quite that advanced yet, but we will be putting the shapes we’ve learned in this lesson to use and create a talk bubble using only CSS. If you think about it, a talk bubble is essentially just a square with rounded corners and a sideways triangle put together. We can use those two simple elements to create a fun compound shape you can easily find use for in your web development projects.

To begin, go into the same newshapes.CSS file and add the selector for #talkbubble. Add the necessary properties to create a rectangle with the width of 120px and the height of 80px, and make the corners rounded by 10px. When you’re done, your CSS should look like this:

#talkbubble {
 width: 120px;
 height: 80px;
 background: #536DFE ;
 position: relative;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 padding: 5px;
}

Add the corresponding HTML to newshapes.html to make sure everything’s looking correct. If it is, go back to newshapes.css and add the following at the bottom of the document:

#talkbubble:before {
 content:"";
 position: absolute;
 right: 100%;
 top: 26px;

After that, add the properties necessary to create a triangle with it’s point facing the left. Make the top border 13px, the right border 26px, and the bottom border 13px, and close the tag. The finished CSS should look like this:

#talkbubble {
 width: 120px;
 height: 80px;
 background: #536DFE ;
 position: relative;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 padding: 5px;
}
#talkbubble:before {
 content:"";
 position: absolute;
 right: 100%;
 top: 26px;
 width: 0;
 height: 0;
 border-top: 13px solid transparent;
 border-right: 26px solid #536DFE ;
 border-bottom: 13px solid transparent; }

At this point, you may be wondering how we’re going to have different properties for the same selector. That’s where the “:before” tag comes in. The before tag allows you to add elements to different selections without needing extra HTML. The pseudo element isn’t actually in the DOM, but it will function as if it is.
Go back and add the HTML necessary to call your new selector, and take a look at your new CSS only talk bubble!


  1. Crystal Peterson took 4110 online in Summer 2015. She produced this lesson for an independent study at NMI.

  2. If a picture is worth a thousand words, think how many words an animation is worth.