Today’s Goals:
- Period 2- HTML: Font Awesome and favicons; begin HTML Championships
- Period 3- HTML: Favicons; begin HTML Championships
Today’s Featured Site:
- http://www.plspetdoge.com/– What is the favicon on this website?
Font Awesome
- What is it and why would you want to use it?
- Some fun examples here and here
- How to use it? What is a CDN?
- Getting started: Grab the code from this file and copy and paste it below the title in your head section. Let’s check out the available icons and add some to our table headers. Add a calendar icon next to Date, a male icon next to Opponent, and an eye icon next to Watch.
- What do you think about Font Awesome? What’s good? What could be better?
Favicons
- 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 first 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 roughly)
- 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 (you will have to delete the quotation marks and add them again):
- <link rel=“shortcut icon” href=“favicon.jpg”>
- Now add this code to your <head> section to link your favicon to your webpage (you will have to delete the quotation marks and add them again):
- Want an image as your favicon?
- Try here http://www.favicon-generator.org/
- Create one first
HTML Championships
- The HTML Championships brings together everything you’ve learned over the past few classes about HTML. Your goal is to finish the HTML Championships by the end of class on Friday. We will review it together next week.
- Click here to get started!