उपयोगकर्ता द्वारा किसी एप्लिकेशन में की जाने वाली कार्रवाइयों को दर्शाने के लिए आइकन अच्छी तरह से काम करते हैं। कई आइकन लाइब्रेरी आसानी से उपलब्ध हैं। यहाँ कई में से कुछ हैं:
- बहुत बढ़िया फ़ॉन्ट - https://fontawesome.com/
- फ्लैटिकॉन - https://www.flaticon.com/
- मटेरियल डिज़ाइन आइकॉन - https://material.io/resources/icons/
निश्चित रूप से ऊपर बताए गए कई और हैं, लेकिन इस गाइड का लक्ष्य आपको यह दिखाना है कि अपनी परियोजना के लिए उपरोक्त पुस्तकालयों में से किसी एक का उपयोग कैसे करें और शैली को नियंत्रित करने के लिए इसे लक्षित करें। इसके अलावा, एक बार जब आप एक पुस्तकालय के लिए प्रक्रिया सीख लेते हैं, तो यह दूसरों के लिए बहुत समान होता है।
इस लेख में, हम Font Awesome Icon Library का उपयोग करेंगे। नीचे दिए गए संपादक में, <link> . पर ध्यान दें HTML दस्तावेज़ के शीर्ष में। यह एक छोटा सीएसएस फ़ाइल है जो मूल रूप से फ़ॉन्ट विस्मयकारी के आइकनों की लाइब्रेरी का संदर्भ देता है। "छोटा" मूल रूप से इस तथ्य को संदर्भित करता है कि सभी सफेद जगह खत्म हो गई है - इसलिए वास्तव में कोई स्वरूपण नहीं है।
जब तक आपके पास यह सामग्री वितरण नेटवर्क . है - सीडीएन - <head> में , आप लगभग सभी Font Awesome की निःशुल्क लाइब्रेरी तक पहुंचने में सक्षम होंगे। एक एसवीजी पुस्तकालय भी है, लेकिन जब हम जावास्क्रिप्ट के बारे में अधिक बात करेंगे तो हम इसमें शामिल होंगे।
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icons</title>
<style>
.icon-container {
font-size: 24px;
}
.fab {
font-size: 3rem;
color: #1DA1F1;
}
.fa-heart {
font-size: 4rem;
color: crimson;
}
</style>
</head>
<body>
<!-- Icons will go here -->
<div class="icon-container">
<i class="fab fa-twitter"></i>
<span class="fas fa-camera"></span>
<span class="fas fa-heart"></span>
</div>
</body>
</html>
उपरोक्त संपादक में, आप मुख्य भाग में देखेंगे कि हमारे पास दो इनलाइन तत्व हैं, एक <i> और एक <span> तत्व। आपके मार्कअप में आइकन लिखने का कोई भी तरीका एक मान्य तरीका है। मैंने व्यक्तिगत रूप से <i> देखा है सबसे अधिक उपयोग किया, लेकिन मैंने <span> . भी देखा है दुर्लभ अवसर पर।
आप देखेंगे कि तत्व की सामग्री खाली है। वर्ग विशेषता यह है कि हम HTML फ़ाइल के शीर्ष में डाली गई CSS फ़ाइल का उपयोग करके फ़ॉन्ट विस्मयकारी पुस्तकालय से हमें जिस आइकन की आवश्यकता है उसे कैसे खींचते हैं।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
यदि आप यह देखने के लिए सीएसएस फ़ाइल पर एक नज़र डालना चाहते हैं कि आप किसके साथ काम कर रहे हैं, तो आप निश्चित रूप से ऐसा कर सकते हैं। हालांकि यह आपको टेक्स्ट की एक दीवार देगा, इसलिए यह थोड़ा भारी हो सकता है। बस यह जान लें कि आपके पास अपने प्रोजेक्ट में मुफ्त आइकन डालने के लिए आवश्यक सभी जानकारी है।
आइकन के वर्ग नाम में दो भाग होते हैं:शैली उपसर्ग और आइकन नाम। ऊपर के उदाहरण में, हम "fab" और "fas" देखते हैं। "एफए" का अर्थ है फॉन्ट कमाल, "बी" का मतलब ब्रांड और "एस" का मतलब सॉलिड है। अन्य उपसर्ग भी हैं, लेकिन इनके लिए एक PRO खाते की आवश्यकता होती है।
आइकन का नाम तब मिल सकता है जब आप Font Awesome की वेबसाइट पर आइकन गैलरी का अवलोकन कर रहे हों। यह आमतौर पर आपके द्वारा ऊपर देखे गए सम्मेलन का पालन करेगा:"fa-<आइकन का नाम>"।
आइकनों को स्टाइल करते समय और सीएसएस के साथ पृष्ठ पर उनकी स्थिति को नियंत्रित करते समय इनलाइन तत्वों की तरह व्यवहार किया जाना चाहिए। Font Awesome के आइकनों को स्टाइल करने के बारे में अधिक जानकारी के लिए, कृपया उनके दस्तावेज़ देखें, जो वास्तव में सीधे हैं और दस्तावेज़ीकरण पढ़ने में कुछ अभ्यास प्राप्त करने में आपकी सहायता करेंगे। CSS का उपयोग करके स्टाइलिंग का एक उदाहरण ऊपर के संपादक में है।
आइकनों के साथ खेलने और उन्हें स्टाइल करना शुरू करने के लिए ऊपर दिए गए सैंडबॉक्स परिवेश का बेझिझक उपयोग करें!