W3.CSS ExamplesLesson 75Free preview

W3.CSS Icons

This lesson is part of W3.CSS · All levels

Summary

The icon adds visual cues that speed up the understanding of the interface. It generally uses the Awesome Font which is loaded via a CDN, and then the icon is called with a class like fa fa-home. Because it's font-based, icons can be colored and scaled just like regular text. (W3.CSS)

Key points

Add a link to the CDN Font Awesome section (<head>)
Icons are generally written on the <i> or <span> elements with fa-* class
Font icons can be colored and sized using CSS text
Give the "hidden" to the decorative icons
Other alternatives: SVG or icon fonts such as Material Icons

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.