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 ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
