CSS Icons In Hindi – Icons In CSS In Hindi

CSS

CSS Icons In Hindi – Icons In CSS In Hindi – Apne Dekha Hoga KI Aj Kal Har Ek Website Me Social Media Jaise Facebook,Instagram, Youtube, Twitter Etc. Ke Image Dikhayi Dete Hai, Actual Me Vo Image Nhi Hoti , Vo Icons Hote Hai Jo Ham CSS Icons Ki Help Se Banate Hai |

Yadi Aapne  HTML Full Course  And CSS Full Course And Python Full Course And PHP Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |

CSS Icons In Hindi

In Icons Ko Html Page Me Add Karne Ke Liye Icons Ki Library Use Ki Jati Hai , Jisme Hajaro Icons Hai ,Hame Jo Icon Use Karna Hai Uski Class Ko Ham Apne Html File Me Add Kar Lete Hai |

Icons Ko Kese Add Kar Skte Hai – How To Add Icons

Icons Ko Apne Html Page Me Add karne Ka Sabse Simple Tarika Hai Ki Ham Icons Ki Library Use Kare Jaise Ki Font Awesome Library. Library Add Karne Ke bad Jo Icon ham Use Krna Chahte Hai ,USki Class Ko Html Element Me Add Karte Hai |

Jitne Bhi Icons Font – Awesome Library Me hai ,Ham Apni Jarurt Ke Hisab Se ,Icons Ki Size Ko Big Ya Small CSS ki Help Se Kar Skte Hai |

Font Awesome Icons In CSS

Font Awesome Icons Ko Use Karne Ke Liye Hme Sbse Pahale fontawesome.com Website Par Jana Hoga, Fir Sign In Karna Hoga Jo Ki Ekdm Free Hai , Kit Code Ko Copy Karna Hai Aur Html Ke Head Section Me Paste Kar Dena Hai |

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

Kit Code Head Section Me Add Karne Ke Bad Ham Icons Use Kar Skte Hai , Jaisa Ki Niche Dikhaya Rha Hai. Second Step Me Ham Jo Chahe Vo Icon Hmare Html Page Me Add Kar Skte Hai |

Jo Icon Aap Use Krna Chahte Hai Us Par Click Kar Ke Uski Class Ko Ham Apni Html Element Me Add Kar Ke Use Use Kar Skte Hai |

Example –

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/abf8de3026.js" crossorigin="anonymous"></script>
</head>
<body>
<h2>Master Programing CSS Icon Tutorial</h2>
<p>Some Font Awesome icons:</p>
<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>

<p>Styled Font Awesome icons (size and color):</p>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

Output –

Bootstrap Icons

Ham Hmare Page Me Bootstrap Icons Bhi Use Kar Skte Hai ,Bootstrap Icons Use Karne Ke liye Hme Niche Diye Gye Code Ko Html Ke Head Section Me Add Karna Hoga |

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Ye Code Html Ke Head Section Me Add Krne Ke Bad Ham https://icons.getbootstrap.com/ Website Par Jayenge Aur Jo Bhi Font Hme Use Karna Hai Us Par Click Karke Uski Class Name Ko Copy Karke Apne Html Element Me Paste Kar Denge |

Example –

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="container">
<h2>Master Programing Css Icon Tutorial</h2>
<i class="bi bi-alarm"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<br><br>

<p>Styled Bootstrap icons (size and color):</p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;"></i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

Output –

Google Icons

Ham Hmare Page Me Goole Icons Bhi Use Kar Skte Hai ,Google Icons Use Karne Ke liye Hme Niche Diye Gye Code Ko Html Ke Head Section Me Add Karna Hoga |

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

Ye Code Html Ke Head Section Me Add Krne Ke Bad Ham Jo Icon Use Krna Chahte Hai Uski Class Name Html Element Me Add Krenge Aur Use Use Kar Lenge |

Example –

<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

  <h2>Master Programing CSS Icon Tutorial</h2>
<p>Some Google icons:</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

<br><br>

<p>Styled Google icons (size and color):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i>

</body>
</html>

Output –

Leave a Reply

Your email address will not be published. Required fields are marked *