Skip to content

Latest commit

 

History

History
47 lines (29 loc) · 1.72 KB

File metadata and controls

47 lines (29 loc) · 1.72 KB

Working With Icon Fonts

The purpose of this talk is to explore icon fonts and how they are beneficial.

PROS

  • Performance: single font file / HTTP request
  • Aesthetics: vectors instead of raster images
  • Cross-browser Compatibility: all web browsers including IE have the ability to render embedded fonts (unlike SVG or PDF)
  • Flexibility: endless scalability, easy to change size and add effects like text-shadow
  • Accessibility: ligatures can allow text versions of the images which are visible to search engine spiders
  • Workflow Efficiency: save time without having to generate sprites, type in a word and the image is ready

CONS

  • Single design for different sizes
  • Single color (though it is easy to change color and color emoji may remedy this)

FONT EFFECTS

ASSIGNMENT

Create a bio page for yourself that uses font icons for the following:

  • describe your interests or items that you own
  • buttons that link to your body of portfolio work
  • your location, where you’ve traveled or where you want to travel
  • social media icons

You are not limited to only using icon fonts, but try to avoid using image files other than your bio photo.

RESOURCES

A List Apart: The Era of Symbol Fonts

Font Awesome

The Big List of Flat Icons & Icon Fonts

Icon Font Examples

Font Textures

Font Custom