CSS Icons

CSS Icons In Hindi in details

by

किसी भी web page में icons add करने के लिए Google, font awesome जैसे site का use करते है और इसका size or color को manage करने के लिए CSS के color और font size जैसे property का use करते है।

CSS में google icone का use कैसे करते है ?

इसका use करने के लिए HTML के head section में google icone के एक link को add करना पड़ता है। 

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

अगर आप चाहे तो इसके library को download करके भी use कर सकते है।

Example 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS google font example by Technalay</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>
  </body>
</html>
HTML

Preview

CSS google font example by Technalay face favorite backspace

CSS में font awesome icone का use कैसे करते है ?

इसका use करने के लिए HTML page के head section में font awesome के एक link को add किया जाता है।

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
<!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>
   
  </body>
</html>
HTML
CSS font awesome example <

इसे भी पढ़े :

Leave a comment