फ़ॉन्ट भयानक 6: पूर्ण समीक्षा
- 1 फॉन्ट भयानक कैसे स्थापित करें
- विधि 1।
- विधि 2।
- 2 कैसे फ़ॉन्ट भयानक आइकन का उपयोग करें
- 1 मानक आइकन
- 2 बड़े आइकन
- 3 निश्चित चौड़ाई आइकन
- बुलेटेड सूची के लिए 4 आइकन
- 5 फ्रेम किए गए आइकन और उद्धरण
- 6 एनिमेटेड आइकन
- 7 रूपांतरित आइकन
- 8 संयोजन आइकन
- 3 Font Awesome 4.5.0 collection, classes तथाcss code to insert using the content property
- 4 संबंधित संसाधन
- प्रतीक आकार
- आइकन रंग
- अक्सर पूछे जाने वाले प्रश्न
FONT बहुत बढ़िया स्केलेबल वेक्टर आइकन का एक संग्रह है। सीएसएस गुणों का उपयोग करके आइकन को स्वरूपित किया जा सकता है, उनका रंग, आकार, छाया और बहुत कुछ सेट किया जा सकता है। फ़ॉन्ट संस्करण 5.5.0 में 605 आइकन शामिल हैं।
1 फॉन्ट भयानक कैसे स्थापित करें
विधि 1।
निम्न कोड को जोड़कर फ़ाइल के फ़ॉन्ट-awesome.css संस्करण का उपयोग करें<head> खंड:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">एक बार फ़ॉन्ट कनेक्ट होने के बाद, आप अपनी साइट पर आइकन का उपयोग कर सकते हैं।
विधि 2।
फ़ॉन्ट को FONT बहुत बढ़िया डाउनलोड करें। आर्काइव को अनपैक करें और आर्काइव से साइट सर्वर - सीएसएस और फोंट पर दो फ़ोल्डर अपलोड करें। यदि आपके पास पहले से ही अपनी साइट पर ऐसे नामों के साथ फ़ोल्डर हैं, तो आपको बस डाउनलोड किए गए फ़ोल्डरों से फ़ाइलों को उन पर जोड़ने की आवश्यकता है।
आप फ़ाइल के पूर्ण या न्यूनतम संस्करण का उपयोग कर सकते हैं:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 कैसे फ़ॉन्ट भयानक आइकन का उपयोग करें
आइकन को दो तरीकों से एक वेब पेज पर जोड़ा जा सकता है: के लिए उपयुक्त कक्षाएं सेट करके<i> तथा<span> elements, याby adding them to the desired element using the :before, :after pseudo-elements तथाthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: पहले {सामग्री: "\ f015";/ * होम आइकन जोड़ें1 मानक आइकन
फ़ॉन्ट भयानक को इनलाइन तत्वों के साथ उपयोग करने के लिए डिज़ाइन किया गया है। आइकन जोड़ने के लिए, आपको पहले एफए क्लास को सेट करने की आवश्यकता है<i> या<span> तत्व।
तत्व से पहले या बाद में चयनित आइकन जोड़ने के लिए, एक खाली<i></i> या<span></span> तत्व को तत्व में जोड़ा जाता है, जिसे एक आइकन क्लास सौंपा जाता है, साथ ही एक अतिरिक्त वर्ग भी जो स्टाइल का विस्तार करता है।
<i class="fa fa-camera-retro"></i>2 बड़े आइकन
इसके कंटेनर के सापेक्ष एक आइकन के आकार को बढ़ाने के लिए, FA-LG (33% वृद्धि), FA-2X, FA-3X, FA-4X, FA-5X वर्गों का उपयोग करें।
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 निश्चित चौड़ाई आइकन
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation याlists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> घर</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> पुस्तकालय</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> अनुप्रयोग</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> समायोजन</a ></li></ul>बुलेटेड सूची के लिए 4 आइकन
डिफ़ॉल्ट गोलियों को बदलने के लिए Fa-Ul और Fa-Li वर्गों का उपयोग करें<ul>…</ul> बुलेटेड सूची।
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>सामग्री सूचीबद्ध करें</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>सामग्री सूचीबद्ध करें</li> <li><i class="fa-li fa fa-square"></i>सामग्री सूचीबद्ध करें</li></ul>5 फ्रेम किए गए आइकन और उद्धरण
Use the fa-border class to set the border for the icon. The pull-right तथाpull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>लोरम इप्सम डोलर बैठो एमेट, कंसक्टेरस एडिपिसिंग एलीट। डोनेक नेक पुरस कॉनग्यू, पॉसुरे लिबरो इन, पोर्टा सैपियन। SED ELIT LECTUS में। SED LACUS ELIT, SEMPER VITAE FELIS ID, SODALES CONGUE SAPIEN।</p>6 एनिमेटेड आइकन
कताई आइकन स्थापित करने के लिए एफए-स्पिन, एफए-पल्स, एफए-रिफ्रेश, एफए-कोग कक्षाएं जोड़ें। एनीमेशन IE8 - IE9 में समर्थित नहीं है।
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 रूपांतरित आइकन
आइकन को घुमाने या फ्लिप करने के लिए, एफए-रोटेट-* और एफए-फ्लिप-* क्लासेस का उपयोग करें।
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 संयोजन आइकन
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, तथाfa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes तथाcss code to insert using the content property
वेब अनुप्रयोगों के लिए आइकन Fa -adjust - \ f042;Fa -aancor - \ f13d;
Fa -sharcive - \ f187;
Fa -arrows - \ f047;
Fa -sasterisk - \ f069;
Faat - \ f1fa;
Fa-balance-scale-\ f24e;
Fa -ban - \ f05e;
एफए -बैंक - \ f19c;
Fa -barcode - \ f02a;
Fa-battery-Empty-\ f244;
Fa-battery-half-\ f242;
एफए-बैटरी-क्वार्टर-\ f243;
एफए-बैटरी-थ्री-क्वार्टर-\ f241;
Fa-battery-full-\ f240;
Fa -bed - \ f236;
Fa -beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
Fa -binoculars - \ f1e5;
Fa-birthday-केक-\ f1fd;
Fa -bolt - \ f0e7;
Fa- बम - \ f1e2;
Fa -book - \ f02d;
आइकन को घुमाने या फ्लिप करने के लिए, एफए-रोटेट-* और एफए-फ्लिप-* क्लासेस का उपयोग करें।
4 संबंधित संसाधन
फ़ॉन्ट भयानक संग्रह के अलावा, आप अन्य आइकन फोंट का भी उपयोग कर सकते हैं।
फोंटेलो।Fontello में विभिन्न आइकन फोंट का एक बड़ा संग्रह है। आप अपनी पसंद के आइकन का चयन कर सकते हैं और उन्हें अपने कंप्यूटर पर डाउनलोड कर सकते हैं।
फाउंडेशन आइकन।फाउंडेशन आइकन फाउंडेशन फ्रेमवर्क के डेवलपर्स से एक और आइकन फ़ॉन्ट संग्रह है। मानक आइकन के अलावा, साइट में गोल आइकन, सोशल मीडिया आइकन, और बहुत कुछ है।
सामग्री आइकन।सामग्री आइकन Google के एकीकृत फ्लैट आइकन हैं जो धारणा में आसानी को कम करते हैं। आइकन सभी सामान्य प्लेटफार्मों पर और सभी स्क्रीन प्रस्तावों के लिए सुंदर प्रदर्शन के लिए अनुकूलित हैं।
आइकन फ़ॉन्ट संग्रह में 750+ आइकन होते हैं। अपनी वेबसाइट पर एक संग्रह स्थापित करने का सबसे आसान तरीका Google वेब फोंट जैसे आइकन का उपयोग करना है। ऐसा करने के लिए, निम्नलिखित कोड को पेज मार्कअप में शामिल किया गया है:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">ब्राउज़रों में फ़ॉन्ट को सही ढंग से प्रदर्शित करने के लिए, आइकन फ़ॉन्ट का उपयोग करने वाले तत्व को सामग्री-माउस वर्ग दिया जाता है:
.मेटेरियल-आइकॉन {फ़ॉन्ट-फैमिली: 'मटेरियल आइकन'; फ़ॉन्ट-वजन: सामान्य फ़ॉन्ट-शैली: सामान्य फ़ॉन्ट-आकार: 24px; / * पसंदीदा आइकन आकार * प्रदर्शन: इनलाइन-ब्लॉक; चौड़ाई: 1EM; ऊंचाई: 1EM; लाइन-हाइट: 1; पाठ-परिवर्तन: कोई नहीं; पत्र-स्पेसिंग: सामान्य शब्द-रैप: सामान्य; व्हाइट-स्पेस: नॉट्रैप; दिशा: ltr; -webkit-font-smoothing: antialiased; / * सभी WebKit ब्राउज़रों द्वारा समर्थित * पाठ-रेंडरिंग: ऑप्टिमिज़ेलिबिलिटी; / * सफारी और क्रोम सपोर्ट * -मोज-ओएसएक्स-फॉन्ट-स्मूथिंग: ग्रेस्केल; /* फ़ायरफ़ॉक्स समर्थन। *(फ़ॉन्ट-फीचर-सेटिंग: 'लीगा'; /* यानी समर्थन। *}आइकन स्वयं का उपयोग करके जोड़े जाते हैं<I class=''material-माउस''>आइकन का ligature या HTML कोड</i> टैग, उदाहरण के लिए:
<i class="material-माउस">खाता_बालेंस_वैललेट</i><i class="material-माउस"></i>Ligature को सभी आधुनिक ब्राउज़रों द्वारा समझा जाता है, अर्थात - संस्करण 10 से शुरू होता है। आइकन कोड स्वचालित रूप से उत्पन्न होता है, इसके लिए आपको आइकन छवि पर लेफ्ट -क्लिक करने और सुझाए गए लुक को कॉपी करने की आवश्यकता है।
प्रतीक आकार
प्रतीक आकार is controlled by additional classes:
.Material-माउस.md-18 {font- आकार: 18px;} /* के लिए<i class="material-माउस md-18"></i> *.Material-माउस.md-24 {फ़ॉन्ट-आकार: 24px;} /* के लिए<i class="material-माउस md-24"></i> *.Material-माउस.md-36 {फ़ॉन्ट-आकार: 36px;} /* के लिए<i class="material-माउस md-36"></i> *.Material-माउस.md-48 {फ़ॉन्ट-आकार: 48px;} /* के लिए<i class="material-माउस md-48"></i> *आइकन रंग
अतिरिक्त वर्गों का उपयोग करके आइकन का रंग भी सेट किया गया है:
.Material-माउस.md-dark {रंग: rgba (0, 0, 0, 0.54);} /*<i class="material-माउस md-dark"></i> *.Material-माउस.md-light {रंग: rgba (255, 255, 255, 1);} /*<i class="material-माउस md-light"></i> *.Material-माउस.md-dark.md-dactive {रंग: rgba (0, 0, 0, 0.26);} /*<i class="material-माउस md-dark md-inactive"></i> *.Material-माउस.md-light.md- निष्क्रिय {रंग: rgba (255, 255, 255, 0.3);} /*<i class="material-माउस md-light md-inactive">चेहरा</i> *एक कस्टम रंग सेट करने के लिए, आपको एक वर्ग जोड़ने की आवश्यकता है जो आइकन के रंग को परिभाषित करता है, उदाहरण के लिए:
.Material-माउस.indigo {रंग: #1a237e;} /*<i class="material-माउस indigo"></i> *अक्सर पूछे जाने वाले प्रश्न
- साधारण शब्दों में फ़ॉन्ट क्या है?
- संक्षेप में, यह आइकन के साथ एक फ़ॉन्ट है जिसे इसकी दृश्यता और डिजाइन को बढ़ाने के लिए किसी भी वेब पेज तत्व में जोड़ा जा सकता है। संग्रह में किसी भी कार्य और उद्देश्य के लिए उपयुक्त कई सौ आइकन होते हैं।इस लिंक पर अधिक जानकारी
मिशेल पिंसन एक यात्रा उत्साही और सामग्री निर्माता है। शिक्षा और अन्वेषण के लिए जुनून का विलय करते हुए, उन्होंने ज्ञान साझा करने और शैक्षिक सामग्री को लुभाने के माध्यम से दूसरों को प्रेरित करने के लिए कहा। वैश्विक विशेषज्ञता और भटकने की भावना के साथ व्यक्तियों को सशक्त बनाकर दुनिया को एक साथ लाना।
