आइकन्स किसी एप्लिकेशन में उपयोगकर्ता द्वारा की जा सकने वाली कार्रवाइयों को चित्रित करने के लिए अच्छी तरह से काम करते हैं। कई आइकन लाइब्रेरी आसानी से उपलब्ध हैं। यहां कुछ हैं:
- Font Awesome - https://fontawesome.com/
- Flaticon - https://www.flaticon.com/
- Material Design Icons - https://material.io/resources/icons/
इस लेख में, हम फॉन्ट ऑसम आइकन लाइब्रेरी का उपयोग करेंगे। नीचे दिए गए एडिटर में, HTML दस्तावेज़ के हेड में <link> पर ध्यान दें। यह एक मिनिफाइड CSS फ़ाइल है जो मूल रूप से फॉन्ट ऑसम की आइकन लाइब्रेरी को संदर्भित करती है।
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
जब तक आपके पास <head> में यह कंटेंट डिलीवरी नेटवर्क (CDN) है, आप फॉन्ट ऑसम की मुफ्त लाइब्रेरी के लगभग सभी का उपयोग कर सकेंगे।
HTML में आइकन्स जोड़ना
<div class="icon-container"> <i class="fab fa-twitter"></i> <span class="fas fa-camera"></span> <span class="fas fa-heart"></span> </div>
आप <i> या <span> एलिमेंट का उपयोग कर सकते हैं - दोनों वैध तरीके हैं। एलिमेंट की सामग्री खाली है। क्लास एट्रिब्यूट है जिससे हम HTML फ़ाइल के हेड में डाली गई CSS फ़ाइल का उपयोग करके फॉन्ट ऑसम की लाइब्रेरी से आवश्यक आइकन खींचते हैं।
आइकन क्लास नाम संरचना
आइकन के क्लास नाम के दो भाग होते हैं: स्टाइल प्रीफिक्स और आइकन नाम।
- fab: "fa" = फॉन्ट ऑसम, "b" = ब्रांड
- fas: "fa" = फॉन्ट ऑसम, "s" = सॉलिड
- अन्य प्रीफिक्स (far, fal, fad, etc.) के लिए PRO खाता आवश्यक।
आइकन नाम फॉन्ट ऑसम की वेबसाइट पर आइकन गैलरी देखते समय मिल सकता है। कन्वेंशन: fa-<icon name>।
CSS से आइकन्स स्टाइल करना
आइकन्स को स्टाइल करते समय और CSS के साथ पेज पर उनकी स्थिति को नियंत्रित करते समय इंलाइन एलिमेंट्स की तरह व्यवहार किया जाना चाहिए।
.icon-container { font-size: 24px; }
.fab { font-size: 3rem; color: #1DA1F1; }
.fa-heart { font-size: 4rem; color: crimson; }
निष्कर्ष
CDN के माध्यम से फॉन्ट ऑसम (या इसी तरह की लाइब्रेरी) को शामिल करना आपकी परियोजनाओं में स्केलेबल वेक्टर आइकन्स जोड़ने का सबसे तेज़ तरीका है। एक बार CSS फ़ाइल लिंक हो जाने के बाद, आप केवल उपयुक्त क्लास नामों के साथ <i> या <span> एलिमेंट्स जोड़कर और उन्हें नियमित CSS प्रॉपर्टीज (font-size, color, आदि) के साथ स्टाइल करके किसी भी आइकन का उपयोग कर सकते हैं।
