Adding a Font and Icon Toolkit

Font Awesome

The last element you will be adding this week to your website will be social media icons in the footer of your web page using Font Awesome.

First, let us get started with Font Awesome. You may be wondering, exasctly what is Font Awesome? Perhaps the best answer can be found at Wikipedia:

Essentially, you can use Font Awesome as a way to quickly add icons to your website in a way that is fast and flexible. You wil be linking to Facebook, YouTube, and Twitter, three of the most popular social media sites.

Using icons rather than graphic images is a change from just a few years ago. Take YouTube for example. Previously, you would have visited the YouTube site to find an appropriate YouTube image to use as an icon. This image would have been uploaded to your website, and used as the link to YouTube.

Here is an example of a YouTube image:

This is a jpeg file, an image file which is 20.8K in size. The image is 77 pixels wide. As a graphic image, this will take a little time to download, though the size is so small the download time will be fast. If this image is the size you need, or you need an image a little smaller, then you are in luck. However, if you need this image to be larger, say, twice as large, then you will see the quality of the image suffer:

Also, as a jpeg image, the icon has a solid white background. Again, this works great if your web page also has a white background. But what if the background color is a pale yellow? How will this image look?

Not really a pretty sight. If the image was a gif, or a png file, and used a transparency layer, then we would not have these problems. But as we add a transparency layer to images, the images also become larger, and take longer to download.

So to solve these problems, and to give designers much more flexibility in web design, font icons like Font Awesome were developed. Font icons look like graphic images, but on the web page they can be styled in the same way that we can style text. This means the same CSS properties can be used for font icons: like font size, font color, text shadow and more.

Here is the Font Awesome version of the YouTube logo:

 

<i class="fa fa-youtube" aria-hidden="true" style="font-size:180px;"></i>

And we can do so much more with the Font Awesome version. In the same way we can make a h1 heading text red with the CSS rule: color:#ff0000;, we can also apply this style rule to the Font Awesome icon:

 

<i class="fa fa-youtube" aria-hidden="true" style="font-size:180px;color:#ff0000;"></i>

If we want to add some text shadow, when we just add the CSS text-shadow property as well:

 

 <i class="fa fa-youtube" aria-hidden="true" style="font-size:180px;color:#ff0000;text-shadow:2px 2px 2px #424242;"></i>

And this is just scratching the surface, there are many more ways that we can manipulate and change our Font Awesome icons. And since they are being treated as text, of course we can change the back ground color without any problems as well:

SVG: Scalable Vector Graphics

The secret to the clean, sharp appearance of the Font Awesome icons is a new web technology called Scalable Vector Graphics.

With the jpeg image, you are veiwing a collection of pixels, arranged in a fixed pattern, at a fixed size. In the case of SVG, the browser has a set of instructions that describe how to create each icon from scratch. Rather than storing a picture of the YouTube icon, you are storing the instructions on how to create a YouTube icon. Consider another example: pretend that our icon is a simple blue and yellow circle. Here is a jpeg of our logo:

This is a jpeg image, and has a size of 7.92K, and a width of 52 pixels.

We could also recreate this same circle using the follow SVG, scalable vector graphic code:

<svg width="70" height="70">
   <circle cx="30" cy="30" r="20" stroke="blue" stroke-width="10" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg>

 

And again, we wil double the size of the image to show the difference between a jpeg image of a circle, and the same circle created using scalable vector grphics:

Above: Simple Circle logo with a width of 104 pixels. Notice how rough the edges are.

Here is the same circle using the following SVG, scalable vector graphic code. Notice that the values have been doubled, to double the size of the icon:

<svg width="140" height="140">
   <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="20" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg>

Just as with the Font Awesome YouTube icon, the SVG version maintains its sharpness and clarity. Scalable vector graphics maintain their sharpness at any resolution, whether mobile, tablet, or laptop. In fact, we could make this icon as large as we want, and the image will always be sharp and clear.

This is just a simple demonstration of the power of SVG. SVG is a relatively new technology. It is supprted by all the major browsers as of 2016, but some older computers, using older browsers, may see the message "Sorry, your browser does not support inline SVG" rather than the circle.

We have been discussing SVG in the context of icons, but the real power of SVG is not in the limited application to icons, but rather to animation and graphics. SVG is intended to replace the older technology of Adobe Flash.

Flash, as you may be aware, can be prone to security issues. Flash also requires additional CPU, or computer power, to achieve its effects. For this reason, Apple decided that none of their mobile products, such as the iPhone, would support Flash, since using Flash drained the device of its reserve of battery power. As more users have browsers or devices that support SVG, expect to see the number of website using Flash to decrease.

Wikipedia page on SVG

---

Wayne Joness
West Los Angeles College, cs952
Fall