फॉन्ट अप्रतिम 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 संबंधित संसाधने
- चिन्ह आकार
- आयकॉन रंग
- वारंवार विचारले जाणारे प्रश्न
फॉन्ट अद्भुत स्केलेबल वेक्टर चिन्हांचा संग्रह आहे. सीएसएस गुणधर्मांचा वापर करून चिन्हांचे स्वरूपन केले जाऊ शकते, त्यांचा रंग, आकार, छाया आणि बरेच काही सेट करा. फॉन्ट आवृत्ती 5.5.0 मध्ये 605 चिन्हांचा समावेश आहे.
1 फॉन्ट अप्रतिम कसे स्थापित करावे
पद्धत 1.
खालील कोड जोडून फाईलची फॉन्ट-अद्भुत. सीएसएस आवृत्ती वापरा<head> विभाग:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">एकदा फॉन्ट कनेक्ट झाल्यावर आपण आपल्या साइटवरील चिन्ह वापरू शकता.
पद्धत 2.
फॉन्ट अद्भुत वरून फॉन्ट डाउनलोड करा. आर्काइव्ह अनपॅक करा आणि आर्काइव्हमधून दोन फोल्डर्स साइट सर्व्हर - सीएसएस आणि फॉन्टवर अपलोड करा. आपल्याकडे आधीपासूनच आपल्या साइटवर अशा नावांसह फोल्डर्स असल्यास, आपल्याला त्या डाउनलोड केलेल्या फोल्डर्समधून फायली जोडण्याची आवश्यकता आहे.
आपण फाईलची संपूर्ण किंवा मिनीफाइड आवृत्ती वापरू शकता:
<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> ली: आधी {सामग्री: "\ f015";/ * होम आयकॉन जोडा */फॉन्ट-फॅमिली: फॉन्टाव्होम; रंग: #AAAAAA; मार्जिन-राइट: 10 पीएक्स;}1 मानक चिन्ह
इनलाइन घटकांसह वापरण्यासाठी फॉन्ट अद्भुत डिझाइन केलेले आहे. चिन्ह जोडण्यासाठी, आपल्याला प्रथम एफए वर्ग सेट करणे आवश्यक आहे<i> किंवा<span> घटक.
घटक आधी किंवा नंतर निवडलेले चिन्ह जोडण्यासाठी, रिक्त<i></i> किंवा<span></span> घटक घटकात जोडला जातो, जो आयकॉन क्लास नियुक्त केला जातो, तसेच स्टाईलिंग वाढविणारा अतिरिक्त वर्ग.
<i class="fa fa-camera-retro"></i>2 मोठे चिन्ह
त्याच्या कंटेनरशी संबंधित चिन्हाचा आकार वाढविण्यासाठी, एफए-एलजी (33% वाढ), एफए -2 एक्स, एफए -3 एक्स, एफए -4 एक्स, एफए -5 एक्स वर्ग वापरा.
<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 चिन्ह
ए मध्ये डीफॉल्ट बुलेट पुनर्स्थित करण्यासाठी एफए-उल आणि एफए-ली वर्ग वापरा<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>लॉरेम इप्सम डोलोर सिट अ‍ॅमेट, कॉन्सेक्टेटर ip डिपिस्किंग एलिट. डोनेक नेक पुरस कॉन्ग, पोझेरे लिबेरो इन, पोर्टा सॅपियन. सेड एलिट लेक्टस मध्ये. सेड लॅकस एलिट, सेम्पर व्हिटा फेलिस आयडी, सोडेल्स कॉन्ग सेपियन.</p>6 अ‍ॅनिमेटेड चिन्ह
स्पिनिंग आयकॉन सेट करण्यासाठी एफए-स्पिन, एफए-पल्स, एफए-रिफ्रेश, एफए-सीओजी वर्ग जोडा. आयई 8 - आयई 9 मध्ये अ‍ॅनिमेशन समर्थित नाही.
<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
वेब अनुप्रयोगांसाठी चिन्ह एफए -समायोजन - \ एफ 042;एफए -अँकर - \ एफ 13 डी;
एफए -आर्काइव्ह - \ एफ 187;
एफए -एरो - \ एफ 047;
एफए -एस्ट्रिस्क - \ एफ 069;
फॅट - 1 एफ 1 एफए;
एफए-बॅलन्स-स्केल-24 एफ 24 ई;
एफए -बॅन - \ एफ 05 ई;
एफए -बँक - \ एफ 19 सी;
एफए -बारकोड - \ एफ 02 ए;
एफए-बॅटरी-रिक्त-\ एफ 244;
एफए-बॅटरी-हाफ-\ एफ 242;
एफए-बॅटरी-चतुर्थांश-\ एफ 243;
एफए-बॅटरी-तीन-चतुर्थांश-\ एफ 241;
एफए-बॅटरी-फुल-2 एफ 240;
एफए -बेड - 2 एफ 236;
एफए -बिअर - \ एफ 0 एफसी;
एफए -बेल - \ एफ 0 एफ 3;
एफए-बेल-स्लॅश-\ एफ 1 एफ 6;
एफए -बिनोक्युलर - \ एफ 1 ई 5;
एफए-बर्थडे-केक-1 एफ 1 एफडी;
एफए -बोल्ट - \ एफ 0 ई 7;
एफए -बॉम्ब - \ एफ 1 ई 2;
एफए -बुक - \ एफ 02 डी;
आयकॉन फिरविण्यासाठी किंवा फ्लिप करण्यासाठी, एफए-रोटेट-* आणि एफए-फ्लिप-* वर्ग वापरा.
4 संबंधित संसाधने
फॉन्ट अप्रतिम संग्रह व्यतिरिक्त, आपण इतर चिन्ह फॉन्ट देखील वापरू शकता.
फोंटेलो.फोंटेलो मध्ये विविध चिन्ह फॉन्टचा मोठा संग्रह आहे. आपण आपल्या आवडीचे चिन्ह निवडू शकता आणि आपल्या संगणकावर ते डाउनलोड करू शकता.
फाउंडेशन आयकॉन.फाउंडेशन आयकॉन फाउंडेशन फ्रेमवर्कच्या विकसकांकडून आणखी एक चिन्ह फॉन्ट संग्रह आहे. मानक चिन्हांव्यतिरिक्त, साइटमध्ये गोल चिन्ह, सोशल मीडिया चिन्ह आणि बरेच काही आहे.
भौतिक चिन्ह.मटेरियल आयकॉन हे Google चे युनिफाइड फ्लॅट चिन्ह आहेत जे आकलनास सहजतेने मूर्त रूप देतात. सर्व सामान्य प्लॅटफॉर्मवर आणि सर्व स्क्रीन रिझोल्यूशनसाठी सुंदर प्रदर्शनासाठी चिन्ह अनुकूलित आहेत.
आयकॉन फॉन्ट संग्रहात 750+ चिन्ह आहेत. आपल्या वेबसाइटवर संग्रह स्थापित करण्याचा सर्वात सोपा मार्ग म्हणजे Google वेब फॉन्ट सारख्या चिन्हांचा वापर करणे. हे करण्यासाठी, खालील कोड पृष्ठ मार्कअपमध्ये समाविष्ट केले आहे:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">ब्राउझरमध्ये फॉन्ट योग्यरित्या प्रदर्शित करण्यासाठी, आयकॉन फॉन्ट वापरणार्‍या घटकास मटेरियल-आयकॉन वर्ग दिला जातो:
.मॅटेरियल-आयसीन्स {फॉन्ट-फॅमिली: 'मटेरियल आयकॉन'; फॉन्ट-वेट: सामान्य फॉन्ट-शैली: सामान्य फॉन्ट-आकार: 24px; / * प्राधान्यकृत चिन्ह आकार */ प्रदर्शन: इनलाइन-ब्लॉक; रुंदी: 1 एम; उंची: 1 एम; रेखा उंची: 1; मजकूर-परिवर्तन: काहीही नाही; पत्र-अंतर: सामान्य शब्द-ओघ: सामान्य; व्हाइट-स्पेस: नौरॅप; दिशा: एलटीआर; -वेबकिट-फॉन्ट-स्मूथिंग: अँटीआलाइडेड; / * सर्व वेबकिट ब्राउझरद्वारे समर्थित */ मजकूर-प्रस्तुत: ऑप्टिमाइझिलेजिबिलिटी; / * सफारी आणि क्रोम समर्थन */ -मोज-ओएसएक्स-फॉन्ट-स्मूथिंग: ग्रेस्केल; /* फायरफॉक्स समर्थन. */ फॉन्ट-वैशिष्ट्य-सेटिंग्ज: 'लीगा'; /* म्हणजे समर्थन. */}चिन्ह स्वतःच जोडले जातात<I class=''material-चिन्ह''>चिन्हाचा अस्थिबंधन किंवा एचटीएमएल कोड</i> टॅग, उदाहरणार्थ:
<i class="material-चिन्ह">खाते_बेलन्स_वालेट</i><i class="material-चिन्ह"></i>अस्थिबंधन सर्व आधुनिक ब्राउझरद्वारे समजले जाते, म्हणजेच - आवृत्ती 10 पासून प्रारंभ होत आहे. चिन्ह कोड स्वयंचलितपणे व्युत्पन्न केला जातो, यासाठी आपल्याला आयकॉन प्रतिमेवर डावी -क्लिक करणे आवश्यक आहे आणि सूचित देखावा कॉपी करणे आवश्यक आहे.
चिन्ह आकार
चिन्ह आकार is controlled by additional classes:
.मॅटरियल-आयसीओन्स.एमडी -18 {फॉन्ट-आकार: 18 पीएक्स;} /* साठी<i class="material-चिन्ह md-18"></i> */.मॅटरियल-आयसीओन्स.एमडी -24 {फॉन्ट-आकार: 24px;} /* साठी<i class="material-चिन्ह md-24"></i> */.मॅटरियल-आयसीओन्स.एमडी -36 {फॉन्ट-आकार: 36 पीएक्स;} /* साठी<i class="material-चिन्ह md-36"></i> */.मॅटरियल-आयसीओन्स.एमडी -48 {फॉन्ट-आकार: 48px;} /* साठी<i class="material-चिन्ह md-48"></i> */आयकॉन रंग
अतिरिक्त वर्गांचा वापर करून चिन्हांचा रंग देखील सेट केला आहे:
.मॅटरियल-आयसीन्स.एमडी-गडद {रंग: आरजीबीए (0, 0, 0, 0.54);} /*<i class="material-चिन्ह md-dark"></i> */.मॅटरियल-आयसीन्स.एमडी-लाइट {रंग: आरजीबीए (255, 255, 255, 1);} /*<i class="material-चिन्ह md-light"></i> */.मॅटरियल-आयसीओन्स.एमडी-डार्क.एमडी-इनॅक्टिव्ह {रंग: आरजीबीए (0, 0, 0, 0.26);} /*<i class="material-चिन्ह md-dark md-inactive"></i> * /.मॅटरियल-आयसीओन्स.एमडी-लाइट.एमडी-इनॅक्टिव्ह {रंग: आरजीबीए (255, 255, 255, 0.3);} /*<i class="material-चिन्ह md-light md-inactive">चेहरा</i> */सानुकूल रंग सेट करण्यासाठी, आपल्याला चिन्हाचा रंग परिभाषित करणारा एक वर्ग जोडण्याची आवश्यकता आहे, उदाहरणार्थ:
.मॅटरियल-आयसीओन्स.इंडिगो {रंग: #1 ए 237 ई;} /*<i class="material-चिन्ह indigo"></i> */वारंवार विचारले जाणारे प्रश्न
- साध्या शब्दांत फॉन्ट काय छान आहे?
- थोडक्यात, हे आयकॉनसह एक फॉन्ट आहे जे दृश्यमानता आणि डिझाइन वाढविण्यासाठी कोणत्याही वेब पृष्ठाच्या घटकामध्ये जोडले जाऊ शकते. संग्रहात कोणत्याही कार्यासाठी आणि हेतूसाठी योग्य कित्येक शंभर चिन्ह आहेत.या दुव्यावर अधिक माहिती
मिशेल पिनसन एक प्रवासी उत्साही आणि सामग्री निर्माता आहे. शिक्षण आणि अन्वेषणाची उत्कटता विलीन केल्यामुळे, त्याने ज्ञान सामायिक करण्यास आणि इतरांना मोहक शैक्षणिक सामग्रीद्वारे प्रेरित केले. जागतिक कौशल्य आणि भटकंतीची भावना असलेल्या व्यक्तींना सक्षम बनवून जगाला जवळ आणणे.
