I know HTML

Class Wednesday, September 30, 2015

0. Today’s featured website:

Today’s goals: Add Font Awesome to our webpages; Add a favicon

1. New challenge- Font Awesome!

  • To begin, paste this code in your head section: 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  • Now let’s check out some examples
  • Finally, here are the icons we can use
  • Let’s try making our bullets more interesting with Font Awesome

2. Adding a favicon

  • Favicons are the tiny icons next to your page title in the browser.
    • What’s ours on the class website?
  • Favicons are 16 x 16 pixels and the code for adding them goes into the <head> section
  • To make one for your website:
    • Create one first
      • Go to  https://pixlr.com/editor/ and choose “create new image”
      • Make the image width and height 16 pixels
      • To make things easier, change the view from 100% to 300%
      • You are going to make a favicon that’s your initial.  You will need a background color and a text color
      • To change the background color, pick a color by clicking on the color box in the tool bar on the right (bottom of the bar)
      • Select the paint bucket tool (4th from top on the right) and click in your box to make the background the color you selected
      • Now pick another color for your text
      • Click on the type tool (letter “A”, second from the bottom), click in your box, and type your initial.  Change the font and size to something you like (the font will be no bigger than 8 or 9 px)
      • When you’re done, go to file save, and call your image favicon.  MAKE SURE YOU SAVE IT IN THE SAME LOCATION AS YOUR WEB PAGE (desk top or folder)
    • Add the code
      • Now add this code to your <head> section to link your favicon to your webpage:
        • <link rel=“shortcut icon” href=“favicon.jpg”>
    • Want an image as your favicon?