-
Hajipur, Bihar, 844101
CSS
CSS Basics
CSS Styling Properties
-
CSS Box Model
-
CSS Margin
-
CSS Padding
-
CSS Borders
-
CSS Outline
-
CSS Height/Width
-
CSS Max-width
-
CSS Display
-
CSS Position
-
CSS Z-index
-
CSS Overflow
-
CSS Float
-
CSS Inline-block
-
CSS Align
-
CSS Box Sizing
-
CSS Text
-
CSS Fonts
-
CSS Icons
-
CSS Text Effects
-
CSS Web Fonts
-
CSS Colors
-
CSS Backgrounds
-
CSS Color Keywords
-
CSS Gradients
-
CSS Shadows
-
CSS Links
-
CSS Lists
-
CSS Tables
CSS Advanced Selectors & Features
-
CSS Combinators
-
CSS Pseudo-classes
-
CSS Pseudo-elements
-
CSS Attribute Selectors
-
CSS Specificity
-
CSS !important
-
CSS Units
-
CSS Variables
-
CSS @property
-
CSS Math Functions
CSS Media and Image Styling
-
CSS Image Styling
-
CSS Image Centering
-
CSS Image Filters
-
CSS Image Shapes
-
CSS object-fit
-
CSS object-position
-
CSS Masking
CSS Layout Techniques
-
CSS Website Layout
-
CSS Navigation Bar
-
CSS Dropdowns
-
CSS Image Gallery
-
CSS Counters
-
CSS Pagination
-
CSS Multiple Columns
-
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
CSS Icons
🔹 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">★</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
CSS Basics
CSS Styling Properties
-
CSS Box Model
-
CSS Margin
-
CSS Padding
-
CSS Borders
-
CSS Outline
-
CSS Height/Width
-
CSS Max-width
-
CSS Display
-
CSS Position
-
CSS Z-index
-
CSS Overflow
-
CSS Float
-
CSS Inline-block
-
CSS Align
-
CSS Box Sizing
-
CSS Text
-
CSS Fonts
-
CSS Icons
-
CSS Text Effects
-
CSS Web Fonts
-
CSS Colors
-
CSS Backgrounds
-
CSS Color Keywords
-
CSS Gradients
-
CSS Shadows
-
CSS Links
-
CSS Lists
-
CSS Tables
CSS Advanced Selectors & Features
-
CSS Combinators
-
CSS Pseudo-classes
-
CSS Pseudo-elements
-
CSS Attribute Selectors
-
CSS Specificity
-
CSS !important
-
CSS Units
-
CSS Variables
-
CSS @property
-
CSS Math Functions
CSS Media and Image Styling
-
CSS Image Styling
-
CSS Image Centering
-
CSS Image Filters
-
CSS Image Shapes
-
CSS object-fit
-
CSS object-position
-
CSS Masking
CSS Layout Techniques
-
CSS Website Layout
-
CSS Navigation Bar
-
CSS Dropdowns
-
CSS Image Gallery
-
CSS Counters
-
CSS Pagination
-
CSS Multiple Columns
-
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
