🔥Limited Offer: Get 50% OFFon AI & Full Stack Courses🔥
Back to CSS Notes
Topic #54

CSS Icons


How To Add Icons

Icons can easily be added to your HTML page, by using an icon library.

Just add the name of the icon class to any inline HTML element (like <i> or <span>).

Icons from icon libraries are scalable vectors that can be customized with CSS (size, color, shadow, etc.).


Font Awesome Icons

To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the <head> section of your HTML page.

The code looks something like this:

Read more about Font Awesome in our Font Awesome Tutorial.

Note: No downloading or installation is required!

Example

<!DOCTYPE html>
<html>
<head>

  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

</head>
<body>

<i class="fas fa-cloud"></i>
<i  class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>

<i class="fas fa-bars"></i>

</body>
</html>

Note: For a complete reference of all Font Awesome icons, visit our Icon Reference.

Want to go beyond the notes?

Join CodingNow 2.0's CSS course — live mentorship, real projects, and 100% placement support.

Enroll Now — Free Demo Available

CSS Icons – FAQs

Quick answers about learning CSS Icons in CSS.

This free note from CodingNow 2.0 explains CSS Icons in CSS — concept, syntax and worked code examples you can copy, run and revise before interviews.
Yes. Every CSS topic on CodingNow 2.0, including CSS Icons, is 100% free with no signup required.
With focused practice, most students grasp CSS Icons in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.
Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.
WhatsApp
Call NowEnroll Now