CSS Icons In Hindi

📔 : CSS 🔗

जैसा कि हम जानते हैं , कि web pages में icons add करने के लिए google , font awesome या bootstrap CDN use करते हैं। बाकी size और color apply करने के लिए simply color और font-size property का use करते हैं।

CSS google icons

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 से काम चलाते हैं।

facefavoritebackspacecomputer

CSS google icons example

CopyFullscreenClose FullscreenRun
<!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>

CSS font awesome icons

ठीक इसी तरह से , हम CDN का use करके font awesome के icons use कर सकते हैं। font awesome के icons print करने के लिए fas, fa classes use की जाती है।

<i class="fas fa-bomb"></i>

CSS font awesome example

CopyFullscreenClose FullscreenRun
<!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>
CopyFullscreenClose FullscreenRun
<!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>

Related Topics :

Rahul Kumar

Rahul Kumar

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

b2eprogrammers