If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
जैसा कि हम जानते हैं , कि web pages में icons add करने के लिए google , font awesome या bootstrap CDN use करते हैं। बाकी size और color apply करने के लिए simply color और font-size property का use करते हैं।
google materials icons use करने के लिए सबसे पहले हमें <head> section में style sheet add करनी पड़ती है।
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
आप चाहे तो किसी library को download करके भी use में ले सकते हैं , फिलहाल अभी CDN से काम चलाते हैं।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS google font example</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<span class="material-icons md-36">face</span>
<span class="material-icons md-36">favorite</span>
<span class="material-icons md-36">backspace</span>
<span class="material-icons md-36">computer</span>
</body>
</html>ठीक इसी तरह से , हम CDN का use करके font awesome के icons use कर सकते हैं। font awesome के icons print करने के लिए fas, fa classes use की जाती है।
<i class="fas fa-bomb"></i>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font awesome example</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
</head>
<body>
<i class="fas fa-address-book"></i>
<i class="fas fa-air-freshener"></i>
<i class="fas fa-ambulance"></i>
<i class="fas fa-paw"></i>
<i class="fas fa-bomb"></i>
<i class="fas fa-globe"></i>
<i class="fas fa-glass-martini"></i>
<i class="fad fa-coffee"></i>
<i class="fas fa-briefcase"></i>
<i class="fas fa-bell"></i>
</body>
</html>font awesome हमें size control करने के लिए भी classes provide कराता है -
<i class="fas fa-globe fa-2x"></i> <i class="fas fa-glass-martini fa-3x"></i> <i class="fad fa-coffee fa-5x"></i>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font awesome example</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
</head>
<body>
<i class="mx-1 fa-4x fas fa-address-book" style="color: aqua;"></i>
<i class="mx-1 fa-2x fas fa-air-freshener" style="color:blue"></i>
<i class="mx-1 fa-3x fas fa-ambulance" style="color: :blueviolet;"></i>
<i class="mx-1 fa-5x fas fa-paw" style="color: red;"></i>
<i class="mx-1 fas fa-bomb" style="color: gold;"></i>
<i class="mx-1 fa-4x fas fa-globe" style="color:green"></i>
<i class="mx-1 fa-5x fas fa-glass-martini" style="color: rgb(224, 124, 10);"></i>
<i class="mx-1 fa-3x fas fa-coffee" style="color: greenyellow;"></i>
<i class="mx-1 fa-4x fas fa-briefcase" style="color: hotpink;"></i>
<i class="mx-1 fa-5x fas fa-bell" style="color:goldenrod;"></i>
</body>
</html>
Hi ! My name is Rahul Kumar Rajput. I'm a back end web developer and founder of learnhindituts.com. I live in Uttar Pradesh (UP), India and I love to talk about programming as well as writing technical tutorials and tips that can help to others.
Get connected with me. :) LinkedIn Twitter Instagram Facebook
