सीएसएस प्रतीक
एक आइकन लाइब्रेरी का उपयोग करके, आपके HTML पृष्ठ में चिह्न आसानी से जोड़े जा सकते हैं।
प्रतीक कैसे जोड़ें
अपने HTML पृष्ठ में एक आइकन जोड़ने का सबसे आसान तरीका एक आइकन लाइब्रेरी है, जैसे कि Font Awesome।
<i>किसी भी इनलाइन HTML तत्व (जैसे या
<span>) में निर्दिष्ट आइकन वर्ग का नाम जोड़ें ।
नीचे दिए गए आइकन लाइब्रेरी के सभी आइकन स्केलेबल वैक्टर हैं जिन्हें सीएसएस (आकार, रंग, छाया, आदि) के साथ अनुकूलित किया जा सकता है।
फ़ॉन्ट विस्मयकारी प्रतीक
फ़ॉन्ट विस्मयकारी आइकन का उपयोग करने के लिए,
fontawesome.com<head> पर जाएं, साइन इन करें और अपने HTML पृष्ठ के अनुभाग में जोड़ने के लिए एक कोड प्राप्त करें:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
हमारे Font Awesome 5 ट्यूटोरियल में Font Awesome के साथ आरंभ करने के तरीके के बारे में और पढ़ें ।
नोट: कोई डाउनलोडिंग या इंस्टॉलेशन की आवश्यकता नहीं है!
उदाहरण
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
परिणाम:
सभी फ़ॉन्ट विस्मयकारी चिह्नों के संपूर्ण संदर्भ के लिए, हमारे चिह्न संदर्भ पर जाएँ ।
बूटस्ट्रैप प्रतीक
बूटस्ट्रैप ग्लिफ़िकॉन का उपयोग करने के लिए, <head>अपने HTML पृष्ठ के अनुभाग के अंदर निम्न पंक्ति जोड़ें:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
नोट: कोई डाउनलोडिंग या इंस्टॉलेशन की आवश्यकता नहीं है!
उदाहरण
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
परिणाम:
गूगल प्रतीक
<head>Google आइकन का उपयोग करने के लिए, अपने HTML पृष्ठ के अनुभाग के अंदर निम्न पंक्ति जोड़ें :
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
नोट: कोई डाउनलोडिंग या इंस्टॉलेशन की आवश्यकता नहीं है!
उदाहरण
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
परिणाम:
सभी आइकनों की पूरी सूची के लिए, हमारे आइकन ट्यूटोरियल पर जाएं ।