HTML in Hindi – HTML Icons

  • HTML icons in Hindi
  • Font awesome icons in Hindi
  • How to use icons in HTML Hindi

Introduction to HTML Icons

जिस तरह से software को install करने के बाद हमे एक short cut icon मिलता है ठीक उसी प्रकार से html icons भी होते है | इनका use करना काफी आसन है |

html मे icons का use बहुत ही important होता है | क्योकि icons का use करने के बाद हमारी web site और भी खूबसूरत लगती है या फिर दिखाई देती है |

icons का use करने के लिए हमे एक website को visit करना पड़ता है | website का नाम है | font awesome इस web site पर जाने के बाद हमे एक code मिलता है | इस code को अपने html document के head tag के अन्दर paste करना होता है | फिर page को save कर देना है |

<!DOCTYPE html>
<html>
<head>
<title>Easy Hindi Tutorials</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
</body>
</html>

how to use icons in HTML

हम icons का use करने के लिए दो tags का use कर सकते है पहला <span> tag और दूसरा <i> tag इन दोनों की help से हम icons का use कर सकते है |

यहाँ पर icons का use करने के लिए हमे class का use करना पड़ता है क्योकि बिना class के हम icons का use नही कर सकते है |

जब भी हम class का use करते है icons को use करने के लिए तो सबसे पहले हमे fa type करना पड़ता है | यानि font awesome उसके बाद फिर से fa type करना पड़ता है | दो बार fa type करने के बाद जो icons चाहते है | उसका नाम type करते है | जैसे home फिर आपका icons load हो जायेगा |

<span> tag और <i> tag इन दोनों tags मे कोई difference नही है icons का use करने के लिए दोनों tags मे same class का use किया जाता है |

वैसे तो <span> tag और <i> tag का काम दूसरा होता है | लिकिन icons को use करने के लिए दोनों tags same तरह से work करते है | अब निचे दिये गये code को देखे |

<span class="fa fa-home"></span>
<i class="fa fa-home"></i>
<span class="fa fa-anchor"></span>
<i class="fa fa-anchor"></i>

Resize Icons

html मे icons को resize करना भी important होता है क्योकि icons का use करेंगे तो अपने according है ना | हमे icons को resize करने के लिए font awesome की एक प्रोपर्टी और use करनी है निचे दिये गये code को देखे और समझे |

<span class="fa fa-anchor fa-4x"></span>
<i class="fa fa-anchor fa-3x"></i>

Note :- यहाँ पर icons को maximum 10x तक ही resize कर सकते है |

Border

अगर हम अपने icons को border देना चाहते है तो बड़ी ही आसानी से border apply कर सकते है बस हमे fa के साथ border property का use करना पड़ता है निचे दिये गये code को देखे |

<span class="fa fa-anchor fa-4x fa-border"></span>
<i class="fa fa-anchor fa-4x fa-border"></i>

Spin Icons

अगर हम अपने icons को किसी तरह घुमा सके तो web page मे चार चाँद लग जाते है तो यहाँ पर हम आपको ऐसे दो तरीके बताने वाले है जिनका use करके आप icons को घुमा भी सकते है निचे दिये गये code देखे |

<span class="fa fa-anchor fa-4x fa-pulse"></span>
<i class="fa fa-anchor fa-4x fa-spin"></i>
HTML Forms HTML Meta Tag
Previous Next