What?
I needed to use these in a template I was working on. Font awesome is a brilliant tool for webdevelopers who want icons that can be any size of any color without compromising on image quality or overhead maintenance. It's basically a font set that has all the icons you would want in a modern website design.

How?
To use this list, you can either:

  • Copy the font files to your template folder (my preference) and add the linked stylesheet in the head section of your webpage. I'm selective of what icons I copy over but the full directory can be found at https://github.com/FortAwesome/Font-Awesome:
    <link rel="stylesheet" href="/path/to/font-awesome/css/font-awesome.min.css">
    
  • OR add the linked stylesheet to the head section of your webpage
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
You then add the icon to your webpage using a CSS reference:
<i class="fa fa-facebook-square"></i> My facebook social icon
Further examples are on the following site at https://fortawesome.github.io/Font-Awesome/examples/.

The List
This is a copy of the cheat sheet version 4.4. If some icons don't appear on this page, it is because I have only copied over some of the entire directory (the icons I want to use).

What?
So many people asking this when the solution is a bit of aesthetic styling.

ol{margin:4px}

-- yields
995.
996.
997.
998.
999.
000.      <-- What's going on here then?
001.
002.
Or check out this screenshot of the issue:
Ordered List Issue

How?

What?
This is a quick article on how to resolve the following issue:

  • Overall body background color is blue.
  • Background color of my contents is white.
  • When I visit a small page on the site, the contents background (white) shows.
  • When I visit a very long page on the site, the contents background disappears and reveals the overall background (blue) making the text very hard to read.

Why?
Took me a while to figure out what was the problem, I'd visit some pages and they'd be fine, but when visiting a long page, it would initially display properly but then the white background would disappear when the page finally loaded.

How?

What?
So I have an unordered list of values (*, 1, 2, 3...) and for styling reasons I want the asterisk to be the same size as the numbers but not overlap any list item beneath it. By increasing the size of the asterisk, this often increases the line-height and causes the overall line height to change for other objects in the same row. The problem afterwards was that the asterisk character would overlap the item beneath it (in this case #2) so when a user clicked on #2 they would in fact be clicking on the item containing the asterisk above it.

Objective

Box List Before:Box List After
  • *
  • 1
  • 2
  • 3
  • *
  • 1
  • 2
  • 3

How?