O'Reilly logo

Web Design Blueprints by Benjamin LaGrone

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Getting the fonts

I know there are other and newer ways to create scalable vector graphics, but this is my favorite: jump on over to Font Awesome (https://fortawesome.github.io/Font-Awesome/) and get yourself some web graphics. I recommend downloading the library instead of calling the CDN, as the loading lag time may cause something else to fail. Download it and put it in a lib folder.

Before you can start creating the sun, moon, stars, and clouds, you need to inject the Font Awesome CSS into your HTML. So, in the head element, before the CSS, add the link to the CSS file, as in the following example. I'm currently using version 4.4.0, but use the latest one when you try this:

<link rel="stylesheet" href="lib/font-awesome-4.4.0/css/font-awesome.min.css"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required