आइकन फ़ॉन्ट्स आपकी साइट के लिए बहुत बढ़िया हैं: यहाँ क्यों है

विज्ञापन

आपने आइकन के बारे में सुना है, और आपने लगभग निश्चित रूप से फोंट के बारे में सुना है, लेकिन क्या है आइकन फ़ॉन्ट? आज मैं आपको दिखाऊंगा कि कौन से आइकन फोंट हैं, और आप उन्हें अपनी वेबसाइट का उपयोग करने के लिए कैसे उपयोग कर सकते हैं। आएँ शुरू करें।

चिह्न फ़ॉन्ट्स क्या हैं?

आइकन फोंट बिल्कुल "नियमित" फोंट के समान हैं - वे पाठ के एक टुकड़े के रूप और स्वरूप को परिभाषित करते हैं। यहाँ बड़ा अंतर यह है कि आइकन फोंट में अक्षर और संख्याएँ नहीं होती हैं, लेकिन प्रतीक और चिह्न होते हैं। आप इससे भ्रमित हो सकते हैं, क्योंकि यदि आप अपनी माँ को पत्र नहीं लिख सकते हैं तो यह कितना अच्छा है!

आइकन फोंट मुख्य रूप से वेबसाइटों की शैली के लिए उपयोग किए जाते हैं। जैसा कि वे वेक्टर आधारित हैं, उनका उपयोग करके आकार बदला जा सकता है, स्थानांतरित किया जा सकता है, स्टाइल किया जा सकता है और बदल दिया जा सकता है सीएसएस 5 सीएसएस सीखने के लिए बेबी स्टेप्स और किक-एसएसएस सीएसएस जादूगर बननापिछले एक दशक में सीएसएस सबसे महत्वपूर्ण बदलाव वेबपेज है, और इसने शैली और सामग्री के पृथक्करण का मार्ग प्रशस्त किया। आधुनिक तरीके से, XHTML शब्दार्थ संरचना को परिभाषित करता है ... अधिक पढ़ें

. यह पारंपरिक डिजाइन विधियों जैसे कि छवियों पर बहुत बड़ा लाभ प्रदान करता है। बड़ी संख्या में माउस के लुक और फील को कोड की कुछ लाइनों के साथ बदला जा सकता है। आपको कोई भी चित्र संपादित नहीं करना है, फ़ोटोशॉप को खोलना है या नई फाइलें अपलोड करनी हैं - आप सिर्फ कोड लिखते हैं।

शुरू करना

मैं उपयोग कर रहा हूँ बहुत बढ़िया फ़ॉन्ट इन उदाहरणों के लिए, लेकिन सिद्धांत को कई अन्य फ़ॉन्ट पैक पर लागू किया जा सकता है।

यहाँ स्टार्टर HTML है:

यह वेबपृष्ठ बनाने के लिए आवश्यक HTML की न्यूनतम राशि है। जैसा कि हमने अपने गाइड में कवर किया है, मैं उसमें से अधिकांश की व्याख्या नहीं कर रहा हूँ वेबसाइट कैसे बनाये.

सबसे महत्वपूर्ण पंक्ति निम्नलिखित है:

यह अपने से Font Awesome स्टाइलशीट को लोड करता है CDN. इस पंक्ति के बिना, आपकी वेबसाइट को पता नहीं होगा कि फ़ॉन्ट क्या है, इसलिए यह काफी महत्वपूर्ण है। यह स्टाइलशीट वेब फोंट को एम्बेड करने के सभी कठिन काम को संभालती है, और आम तौर पर आपके लिए चीजों को बहुत आसान बनाती है।

फ़ॉन्ट विस्मयकारी चिह्न सीएसएस वर्गों द्वारा जोड़े गए हैं मैं टैग। इन्हें इसलिए चुना गया क्योंकि इनमें कोई ब्राउज़र या डिफ़ॉल्ट परिभाषित स्टाइल नहीं जुड़ा हुआ है, इसलिए आपके आइकन सभी गड़बड़ नहीं करेंगे। वैकल्पिक रूप से, आप कक्षाओं को जोड़ सकते हैं अवधि टैग, लेकिन यह आपके HTML को अव्यवस्थित करता है।

यहाँ मूल उपयोग है इसे अपने अंदर रखो तन टैग:

 मेरा पहला आइकन

यहाँ ऐसा है जो दिखता है:

कितना आसान था? इसे तोड़ दो। Font Awesome को काम करने के लिए दो वर्गों की आवश्यकता है। पहला कहा जाता है पिता, जो फ़ॉन्ट भयानक के लिए खड़ा है। यह किसी भी आइकन के लिए आवश्यक है, चाहे आप किसी का भी उपयोग करें। दूसरा वर्ग आपके द्वारा उपयोग किए जाने वाले विशेष आइकन को निर्दिष्ट करता है - यह कुछ भी हो सकता है, एक विमान, एक व्यक्ति या क्रेडिट कार्ड। यह भी उपसर्ग है पिता, और जैसा कि यह एक कोग आइकन है, इसका नाम है पिता-कॉग. आप सभी की सूची देख सकते हैं फॉन्ट में आइकन बहुत बढ़िया उनकी वेबसाइट पर

आइकन को कॉग से किसी अन्य पर बदलने का प्रयास करें।

गहरा जा रहा है

एक बार जब आप मूल बातें जान लेते हैं, तो यह कुछ उन्नत ट्रिक्स का समय है।

यदि आप अपना खुद का CSS लिखना नहीं चाहते हैं, तो आप फ़ॉन्ट में बनाई गई शैलियों का उपयोग भयानक रूप से कर सकते हैं। ऐसे कई वर्ग हैं जिनका उपयोग आप आइकन्स को बड़ा बनाने के लिए कर सकते हैं:

उपयोग करने के लिए एक और उपयोगी वर्ग है पिता-स्पिन. यह आपको आइकन घुमाएगा, और पिछले आकार की कक्षाओं के साथ संयुक्त होने पर, आप कुछ अच्छे प्रभाव उत्पन्न कर सकते हैं। यहाँ कोड है:

यहाँ परिणाम है:

आइकन को घुमाना आसान है - का उपयोग करें पिता घुमाने वर्ग:

अंत में संख्या आइकन के लिए रोटेशन की डिग्री को परिभाषित करती है, लेकिन इसे दूर नहीं किया जाता है। आप तक सीमित हैं 90, 180, या 270.

एक अंतिम चाल जो आप कर सकते हैं वह है स्टैकिंग। पिता-ढेर क्लास आपको दो या दो से अधिक आइकन को एक साथ जोड़ने देता है। यहाँ कोड है:

यहाँ ऐसा है जो दिखता है:

एक बार जब आप इन सभी विभिन्न वर्गों का संयोजन शुरू करते हैं, तो संभावनाएं वास्तव में अंतहीन होती हैं।

कस्टम सीएसएस

क्योंकि आइकन फोंट हैं केवल फोंट, आप सीएसएस के साथ उन्हें स्टाइल कर सकते हैं जैसे आप किसी अन्य तत्व को। थोड़ा CSS3 का उपयोग करना एक लंबा रास्ता तय कर सकता है:

यहाँ उस आइकन के लिए HTML है:

यहाँ सीएसएस है:

@keyframes {{मार्जिन-लेफ्ट: 0 से {चल रहा है; } से {मार्जिन-लेफ्ट: 400px; } } .बाइक {एनीमेशन-नाम: चाल; एनीमेशन-अवधि: 4 जी; }

यह CSS काफी बुनियादी है, लेकिन इसका बड़ा प्रभाव है। हालांकि यह एक सीएसएस ट्यूटोरियल नहीं है, इसलिए आप चाहते हो सकता है सीएसएस सीखें 10 सरल सीएसएस कोड उदाहरण आप 10 मिनट में सीख सकते हैंCSS का उपयोग करने के बारे में अधिक जानना चाहते हैं? शुरू करने के लिए इन बुनियादी सीएसएस कोड उदाहरणों की कोशिश करें, फिर उन्हें अपने वेब पेजों पर लागू करें। अधिक पढ़ें यदि आप आंतरिक कामकाज के बारे में अधिक जानना चाहते हैं।

यदि आप वास्तव में चाहते हैं तो आप कुछ विशेष चीजें कर सकते हैं:

यह वेब के लिए फ़ाइल का आकार कम करने के लिए थोड़ा रुकता है। यहाँ HTML है:

यहाँ सीएसएस है:

@keyframes फीका {{अपारदर्शिता: 0 से; } से {अस्पष्टता: 1; } } .पर्सन {अपारदर्शिता: 0; एनीमेशन-नाम: फीका; } # पी 1 {रंग: लाल; एनीमेशन-अवधि: 2 एस; } # पी 2 {रंग: नारंगी; एनीमेशन-अवधि: 4 जी; } # पी 3 {रंग: हरा; एनीमेशन-अवधि: 6s; } # पी 4 {एनीमेशन-अवधि: 8 एस; }

पिछले उदाहरण की तरह, यह CSS3 के एनिमेशन का उपयोग करता है। नामक एक एनीमेशन मुरझाना बनाया गया है, और प्रत्येक व्यक्ति आइकन इस एनीमेशन को अलग-अलग समय के साथ लागू करता है। इन आइकन और CSS3 के साथ जंगली जाने की बहुत संभावना है।

आज के लिए इतना ही। अब आपको अपनी वेबसाइट को लाइक करने के लिए Icon फ़ॉन्ट्स का उपयोग करने में सक्षम होना चाहिए! यदि आप अभी तक अपने कौशल के बारे में सुनिश्चित नहीं हैं, तो इन्हें देखें सीएसएस टेम्पलेट साइटें 11 सीएसएस टेम्पलेट साइटें: स्क्रैच से शुरू न करें!वहाँ हजारों मुफ्त सीएसएस टेम्पलेट्स ऑनलाइन उपलब्ध हैं, सभी आधुनिक डिजाइन प्रवृत्तियों और प्रौद्योगिकियों को गले लगाते हैं। आप उन्हें उनके मूल रूप में उपयोग कर सकते हैं, या उन्हें अपना बनाने के लिए अनुकूलित कर सकते हैं। अधिक पढ़ें , या ये YouTube चैनल आरंभ करने के लिए वेब डिज़ाइन सीखना चाहते हैं? 7 YouTube चैनल आपको आरंभ करने के लिएYouTube में वेब डिज़ाइन शुरुआती लोगों के लिए हजारों वीडियो और चैनल हैं। यहाँ हम आरंभ करने के लिए कुछ सबसे अच्छे लोगों को देखते हैं। अधिक पढ़ें वेब डिजाइन के साथ।

क्या आपने आज कुछ नया सीखा? आपका पसंदीदा आइकन फ़ॉन्ट क्या है? नीचे टिप्पणी करके हमें बताएं!