W3.CSS प्रतीक
चिह्न पुस्तकालय
W3.CSS के साथ आप अपनी पसंद की आइकन लाइब्रेरी का उपयोग कर सकते हैं, जैसे:
- फ़ॉन्ट विस्मयकारी प्रतीक
- Google सामग्री डिज़ाइन चिह्न
- बूटस्ट्रैप प्रतीक
एक चिह्न पुस्तकालय का उपयोग करना
एक आइकन सम्मिलित करने के लिए:
- <शीर्ष> अनुभाग में सीडीएन (सामग्री वितरण नेटवर्क) से आइकन लाइब्रेरी शामिल करें।
- किसी भी इनलाइन HTML तत्व में आइकन वर्ग का नाम जोड़ें।
युक्ति: आइकन जोड़ने के लिए <i> और <span> तत्वों का व्यापक रूप से उपयोग किया जाता है।
आइकन के आकार को नियंत्रित करने के लिए, आइकन का फ़ॉन्ट-आकार गुण बदलें, या w3- आकार वर्ग में से किसी एक का उपयोग करें:
- w3-छोटे
- w3-छोटा
- w3-बड़ा
- w3-xxबड़ा
- w3-xxxबड़ा
- w3-जंबो
कुछ फ़ॉन्ट विस्मयकारी प्रतीक
एफए फा-होम
एफए-बार
एफए फा-एरो-लेफ्ट
एफए फा-तीर-दाएं
एफए फा-सर्च
एफए फा-करीब
एफए एफए-रीफ्रेश
एफए फा-ट्रैश
दर्द होता है
एफए फा-कार
एफए फा-ट्रक
एफए फा-प्लेन
उदाहरण
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
आइकनों की पूरी सूची के लिए: हमारे आइकन संदर्भ पर जाएं
कुछ Google सामग्री डिज़ाइन चिह्न
घर
घर
घर
मेन्यू
मेन्यू
मेन्यू
एरो_बैक
एरो_बैक
एरो_बैक
तीर_आगे
तीर_आगे
तीर_आगे
तलाशी
तलाशी
तलाशी
बंद करे
बंद करे
बंद करे
ताज़ा करना
ताज़ा करना
ताज़ा करना
हटाना
हटाना
हटाना
आदमी
आदमी
आदमी
दिशा_कार
दिशा_कार
दिशा_कार
लोकल_शिपिंग
लोकल_शिपिंग
लोकल_शिपिंग
लोकल_एयरपोर्ट
लोकल_एयरपोर्ट
लोकल_एयरपोर्ट
उदाहरण
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
</html>
कुछ बूटस्ट्रैप चिह्न
घर
मेनू हैमबर्गर
एरो_बैक
तीर_आगे
तलाशी
हटाना
ताज़ा करना
कचरा
उपयोगकर्ता
फ़ाइल
प्रिंट
विमान
उदाहरण
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>