CSS Icons
Icons are a great way to improve the user experience of a website. The simplest way to add icons is with an icon library.
Using Font Awesome
Font Awesome is a popular icon library. To use it, you add a link to their stylesheet in your HTML's <head>, and then use <i> tags with specific classes to display icons.
Example
html
<head>
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
</body>Using Google Material Icons
Google offers a free set of Material Design icons. Similar to Font Awesome, you include a stylesheet link and then use specific tags and classes.
Example
html
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
</body>Using SVG Icons
SVG (Scalable Vector Graphics) is a great way to use icons. Since they are vector-based, they scale to any size without losing quality. You can embed SVG code directly in your HTML.
Example
html
<svg width="30" height="30">
<circle cx="15" cy="15" r="10" stroke="green" stroke-width="2" fill="yellow" />
</svg>Test Yourself with an Exercise
What is a common method for adding scalable icons to a webpage?