• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Icons

← Previous Next →

🔹 What are CSS Icons?

Icons in CSS are small graphical elements that improve visual communication on a webpage. They can be implemented using:

  • Icon Fonts (like Font Awesome)

  • Inline SVG

  • Unicode characters

  • CSS background-images

🔸 1. Using Font Awesome (Icon Fonts)

🔹 Step 1: Include Font Awesome CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
🔹 Step 2: Use the Icon
<i class="fas fa-home"></i>
<i class="fa-solid fa-envelope"></i>

🟢 These are scalable, color-changeable icons using CSS.

🔸 2. Styling Font Awesome Icons with CSS

i {
  font-size: 24px;
  color: darkblue;
  margin-right: 10px;
}

🔸 3. Using SVG Icons

Inline SVG Example:
<svg width="24" height="24" fill="green" xmlns="http://www.w3.org/2000/svg">
  <circle cx="12" cy="12" r="10"/>
</svg>

🟢 Inline SVGs can be styled with fill, stroke, width, height.

🔸 4. Using Unicode Icons

You can use symbols like:

<span class="icon">&#9733;</span> <!-- star symbol -->

.icon {
  color: gold;
  font-size: 20px;
}

🔸 5. Using Background Images as Icons

<div class="icon-user"></div>

.icon-user {
  width: 24px;
  height: 24px;
  background-image: url('user-icon.png');
  background-size: cover;
}

🟢 Useful when using custom PNG/SVG images as icons.

Practice Questions

Q1. Add a home icon using Font Awesome.

Q2. Create a delete (trash) icon and style it red.

Q3. Use an inline SVG circle and color it blue.

Q4. Add a star symbol using Unicode.

Q5. Display a user icon as a background image in a div.

Q6. Increase the size of icons on hover.

Q7. Add margin between icon and text.

Q8. Style all <i> icons to have size 20px and grey color.

Q9. Use a heart icon beside a button label.

Q10. Add an envelope icon before email text.

CSS Icons Quiz

Q1: What is Font Awesome?

A. A color palette
B. A library of icon fonts
C. A CSS grid tool
D. A typography tool

Q2: Which tag is commonly used for icon fonts?

A. <span>
B. <i>
C. <icon>
D. <img>

Q3: Which property changes icon color (font icons)?

A. color
B. background-color
C. fill
D. border-color

Q4: What does &#9733; display?

A. A circle
B. A star
C. A check
D. A heart

Q5: How can you resize Font Awesome icons?

A. padding
B. font-size
C. text-align
D. line-height

Q6: Which icon method allows fill and stroke styling?

A. Font icons
B. Inline SVG
C. Unicode
D. PNG

Q7: How do you apply hover effect on icons?

A. i:hover { color: red; }
B. icon:hover { fade: true; }
C. svg.hover { active: red; }
D. span { icon-hover: true; }

Q8: Which method uses a background image as an icon?

A. Unicode
B. CSS background-image
C. Font Awesome
D. <symbol>

Q9: What is the purpose of fa-solid in Font Awesome?

A. It specifies the icon style
B. It changes text font
C. It adds border
D. It adds image shape

Q10: Which attribute is NOT used in inline SVG?

A. width
B. font-size
C. fill
D. stroke
← Previous Next →
Login
Go Back Top