font-awesome ट्यूटोरियल
फ़ॉन्ट-भयानक के साथ आरंभ करना
खोज…
टिप्पणियों
FontAwesome 600+ वेक्टर आइकन का एक सेट है। यह OFL / MIT -License के तहत स्वतंत्र रूप से उपलब्ध है और इसका उपयोग ओपन-सोर्स या वाणिज्यिक-परियोजनाओं में किया जा सकता है।
सेट अप
फ़ॉन्ट को किसी वेबसाइट में एकीकृत करने के लिए विभिन्न तरीकों का उपयोग किया जा सकता है:
सादे HTML / CSS के लिए:
- यहां उपलब्ध ज़िप डाउनलोड करें , अनज़िप करें, और अपनी वेबसाइट पर सामग्री की प्रतिलिपि बनाएँ। फिर वेबपृष्ठ के
head/css/font-awesome.cssको इस तरह संदर्भित करें:
<link rel="stylesheet" src="/assets/font-awesome/css/font-awesome.css"> - CDN पते का उपयोग करके इसे वेबपेज
headमें संदर्भ दें। ऐसा ही एक पता होगाhttps://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css। इसे संदर्भित करने के लिए, बस एकlinkटैग का उपयोग करें लेकिन इसके बजाय सीडीएन पते पर स्रोत सेट करें
पैकेज प्रबंधकों के लिए:
अधिकांश पैकेज प्रबंधक फ़ॉन्ट को एक पैकेज के रूप में समर्थन करते हैं, और नीचे कुछ उदाहरण हैं:
- NuGet: बस
Font-Awesomeलिए खोजें और इंस्टॉल करें, या पैकेज कंसोल में नीचे कमांड चलाएँ:Install-Package FontAwesome - रूबी: बस इस कमांड को चलाएं:
gem install font-awesome-rails - npm: बस इस कमांड को रन करें:
npm install font-awesome
मूल उदाहरण: एक आइकन का उपयोग करना
साधारण उपयोग का मामला एकल आइकन को उसके सामान्य आकार में संदर्भित करना है: <i class="fa fa-camera-retro"></i> ( इस पहेली में परिणाम देखें)।
एक खाली टैग बनाएं (इसके लिए उपयोग होने की सिफारिश की गई है <i> उस के लिए इस्तेमाल किया गया है) और वांछित आइकन के अनुरूप वर्ग " fa " और वर्ग असाइन करें ( यहां आइकन की सूची देखें)।
फ़ॉन्ट विस्मयकारी का उपयोग करना
फ़ॉन्ट विस्मयकारी उपयोग करने के लिए एक बहुत ही सरल लेकिन शक्तिशाली पुस्तकालय है, जिसमें कुछ शब्दों में 634 चिह्न उपलब्ध हैं।
यह कैसे काम करता है? फ़ॉन्ट विस्मयकारी रूप से यूनिकोड वर्णों का उपयोग करता है ../fonts निर्देशिका में संग्रहीत किसी भी i.fa तत्वों को संबंधित यूनिकोड वर्ण में बदलने के लिए, जैसे कि पाठ के रूप में आइकन प्रदर्शित करना।
मैं एक आइकन कैसे बनाऊं? सभी आइकन कक्षाओं में मुख्य रूप से सर्वोत्तम अभ्यास के लिए एक i तत्व या एक italic element होना चाहिए, लेकिन फ़ॉन्ट विस्मय के साथ प्रदर्शन में भी सुधार करता है। सभी आइकन भी उन पर वर्ग fa है। यह एक आइकन को दर्शाता है और इसके बिना काम नहीं करेगा । उसके बाद, आप जिस आइकन को चाहते हैं उसे जोड़ दें, एक और fa- साथ उपसर्ग fa- एक समाप्त उदाहरण नीचे है:
<i class="fa fa-pencil"></i> बन जाता है 
क्योंकि फ़ॉन्ट भयानक यूनिकोड वर्णों से हटकर काम करता है, इसलिए यह किसी भी पाठ हेरफेर को इसे लागू करने की अनुमति देता है, जैसे कि font-size , color और बहुत कुछ।