Lesson 69 +10 XP

CSS Icons

CSS Icons & Icon Fonts

Add icons without creating image files: icon fonts render as text, so CSS styles them directly.

Icon fonts (Font Awesome, Bootstrap)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<body>
  <i class="fa-solid fa-heart"></i>
  <i class="fa-solid fa-car"></i>
</body>

Style icons with text CSS

Icons are fonts, so normal text properties work:

.fa-solid {
  color: hotpink;
  font-size: 30px;
}

Google Icons (Material)

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">home</i>

.material-icons {
  font-size: 50px;
  color: #04aa6d;
}

Icons in buttons

<button><i class="fa-solid fa-trash"></i> Delete</button>

SVG icons

Inline SVG gives you full control:

<svg width="20" height="20" viewBox="0 0 20 20">
  <circle cx="10" cy="10" r="9" fill="currentColor"/>
</svg>

SVG uses fill, stroke and follows currentColor.

TL;DR

Icon fonts (Font Awesome, Bootstrap, Google) are just fonts.
Style them with color, font-size, text-shadow like any text.
The className tells you which icon to insert.
SVG icons fill/stroke and honor currentColor.
Put icons in buttons/links for instant polish.