CSS Icons Practice Questions with Solutions

By /

Introduction

Icons make websites more attractive and easier to understand. In CSS, icons are commonly added using icon libraries such as Font Awesome or Bootstrap Icons. You can change an icon’s size, color, spacing, and other styles using CSS. In this chapter, you’ll practice styling icons through simple solved questions that are easy for beginners to understand. CSS Icons Practice questions with solutions help to understand the concepts.

Question 1: Change the Color of an Icon

Problem Statement

Write CSS to change the color of a Font Awesome icon to blue.

CSS Code

.fa-solid {
    color: blue;
}

Output

The Font Awesome icon appears in blue.

Explanation

  • color changes the color of the icon.
  • Font Awesome icons behave like text, so the color property works on them.
  • This property does not affect the icon size.

Question 2: Increase the Size of an Icon

Problem Statement

Write CSS to set the size of a Font Awesome icon to 40px.

CSS Code

.fa-solid {
    font-size: 40px;
}

Output

The Font Awesome icon displays with a size of 40px.

Explanation

  • font-size changes the size of text-based icons.
  • Larger values make the icon bigger.
  • This property is commonly used for buttons and headings.

Question 3: Add Space Around an Icon

Problem Statement

Write CSS to add 15px margin around a Font Awesome icon.

CSS Code

.fa-solid {
    margin: 15px;
}

Output

The icon has 15px space outside it on all four sides.

Explanation

  • margin creates space outside the icon.
  • It separates the icon from nearby elements.
  • This improves the layout of icon-based designs.

Question 4: Add Padding to an Icon

Problem Statement

Write CSS to add 10px padding inside a Font Awesome icon.

CSS Code

.fa-solid {
    padding: 10px;
}

Output

The icon has 10px inner spacing, making it appear inside a larger clickable area.

Explanation

  • padding adds space inside the element.
  • It increases the clickable area when the icon is inside a button or link.
  • Padding improves user experience.

Question 5: Add a Border Around an Icon

Problem Statement

Write CSS to display a 2px solid black border around a Font Awesome icon.

CSS Code

.fa-solid {
    border: 2px solid black;
}

Output

The icon appears with a 2px solid black border around it.

Explanation

  • border draws a line around the icon.
  • 2px sets the border thickness.
  • solid defines the border style.
  • black sets the border color.

Question 6: Create a Circular Icon

Problem Statement

Write CSS to create a circular Font Awesome icon with a width and height of 60px.

CSS Code

.fa-solid {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
}

Output

The Font Awesome icon appears inside a perfect circle.

Explanation

  • width and height create a square.
  • line-height vertically centers the icon.
  • text-align: center; horizontally centers the icon.
  • border-radius: 50%; converts the square into a circle.

Question 7: Add a Background Color to an Icon

Problem Statement

Write CSS to add a light blue background behind a Font Awesome icon.

CSS Code

.fa-solid {
    background-color: lightblue;
    padding: 12px;
}

Output

The icon displays with a light blue background and extra inner spacing.

Explanation

  • background-color changes the background behind the icon.
  • padding creates space between the icon and the background.
  • This style is commonly used for feature icons and buttons.

Question 8: Add Rounded Corners to an Icon

Problem Statement

Write CSS to create an icon with 10px rounded corners.

CSS Code

.fa-solid {
    border: 2px solid gray;
    padding: 10px;
    border-radius: 10px;
}

Output

The icon appears inside a box with rounded corners.

Explanation

  • border-radius rounds the corners of the border.
  • 10px creates smooth, rounded edges.
  • This style is commonly used for modern UI designs.

Question 9: Change the Icon Color on Hover

Problem Statement

Write CSS to change a Font Awesome icon’s color to red when the mouse pointer moves over it.

CSS Code

.fa-solid:hover {
    color: red;
}

Output

The icon changes from its original color to red when hovered.

Explanation

  • :hover applies styles when the mouse pointer is over the element.
  • color: red; changes the icon color.
  • Hover effects improve user interaction and visual feedback.

Question 10: Create a Styled Social Media Icon

Problem Statement

Write CSS to create a social media icon with:

  • White icon color
  • Blue background
  • 15px padding
  • Circular shape

CSS Code

.fa-brands {
    color: white;
    background-color: blue;
    padding: 15px;
    border-radius: 50%;
}

Output

The social media icon appears with:

  • White icon
  • Blue circular background
  • Comfortable inner spacing

Explanation

  • color changes the icon color.
  • background-color creates the colored background.
  • padding increases the clickable area.
  • border-radius: 50%; creates a circular icon.

Key Takeaways

  • Icons from libraries like Font Awesome behave like text.
  • color changes the icon color.
  • font-size controls the icon size.
  • padding and margin improve spacing around icons.
  • border and border-radius help create attractive icon styles.
  • background-color adds colored backgrounds behind icons.
  • :hover creates interactive icon effects for better user experience.

Frequently Asked Questions (FAQs)

1. What are CSS icons?

CSS icons are icons that can be styled using CSS. They are commonly provided by libraries like Font Awesome and Bootstrap Icons.

2. How do I change the color of an icon?

Use the color property.

.fa-solid {
    color: blue;
}

3. How do I increase the size of an icon?

Use the font-size property to make the icon larger.

4. How can I create a circular icon?

Set equal width and height, then use:

border-radius: 50%;

5. How do I change an icon’s color when the mouse hovers over it?

Use the :hover pseudo-class.

.fa-solid:hover {
    color: red;
}

6. Can I add a background color to an icon?

Yes. Use the background-color property and add padding to create space around the icon.

7. Which CSS properties are commonly used to style icons?

The most common properties are:

  • color
  • font-size
  • background-color
  • padding
  • margin
  • border
  • border-radius

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top