CSS Icons

CSS Icons

Icons are commonly used in modern web design for navigation, buttons, labels, and UI feedback. A popular way to use icons is through icon libraries that provide icons as fonts or SVG.

In this section, you will learn how to use three popular icon sources: Font Awesome, Bootstrap Icons, and Google Icons.

Icons: Font Awesome

Font Awesome is a widely used icon library. You can include it using a CDN link and then add icons using class names.

<!-- Font Awesome (CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

Example icon usage:

<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-heart"></i>

Icons behave like text, so you can style them using CSS:

i {
  font-size: 24px;
  color: #1f4bd8;
  margin-right: 8px;
}

Icons: Bootstrap Icons

Bootstrap Icons is the official icon library for Bootstrap. It is easy to include and works well with Bootstrap projects.

<!-- Bootstrap Icons (CDN) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Example icon usage:

<i class="bi bi-alarm"></i>
<i class="bi bi-check-circle"></i>
<i class="bi bi-chat-dots"></i>

Styling Bootstrap icons:

.bi {
  font-size: 22px;
  color: #222;
  vertical-align: middle;
}

Icons: Google Icons

Google provides icons via the Material Icons library. You include a link and then use a special element with an icon name.

<!-- Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Example icon usage:

<span class="material-icons">home</span>
<span class="material-icons">search</span>
<span class="material-icons">favorite</span>

Styling Google icons:

.material-icons {
  font-size: 24px;
  color: #1f4bd8;
  vertical-align: middle;
}

Icon Styling Tips

• Icons can be styled with font-size and color
• Use vertical-align: middle for better alignment with text
• Add margin for spacing between icon and text
• Prefer SVG-based icons when you need perfect scaling and sharpness

Code Challenge

Goal: Add and style icons for a simple menu.

HTML:

<ul class="menu">
  <li><i class="bi bi-house"></i> Home</li>
  <li><i class="bi bi-person"></i> Profile</li>
  <li><i class="bi bi-gear"></i> Settings</li>
</ul>

Task:

• Increase the icon size
• Color the icons blue
• Add spacing between icon and text
• Improve list readability

Try a Solution:

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 320px;
}

.menu li {
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 10px;
  margin-bottom: 10px;
}

.menu .bi {
  font-size: 20px;
  color: #1f4bd8;
  margin-right: 10px;
  vertical-align: middle;
}

What’s Next?

Next, you will learn how to style links in CSS.