मैं फ़ॉन्टेलो फोंट का उपयोग कैसे करूं?

Question

एक स्रोत के अनुसार, यह कैसे मैं Fontello फ़ॉन्ट का उपयोग है:

अब यह, एक कस्टम आइकन webfont बनाने के लिए तुच्छ है वास्तव में अपनी आवश्यकताओं के लिए। सबसे पहले, अपने पसंदीदा आइकन का चयन करें। फिर ग्लाइफ कोड (वैकल्पिक) अपडेट करें, और अपना वेबफॉन्ट बंडल डाउनलोड करें। Fontello आपको जो कुछ भी चाहिए उसे उत्पन्न करता है और फिर आप इस मॉड्यूल के कॉन्फ़िगरेशन पेज के माध्यम से बंडल अपलोड करते हैं! इट्स दैट ईजी!

ठीक है। अब क्या? मैं अपने वेबपृष्ठ पर अपने एक आइकन का आह्वान कैसे करूं?

Answer 1

बंडल के अंदर, "फ़ॉन्ट" फ़ोल्डर और एक "सीएसएस" फ़ोल्डर है।

1. फ़ॉन्ट फ़ोल्डर को अपनी परियोजना में ले जाएं। आपकी प्रोजेक्ट इस तरह कुछ दिखाई दे सकती है:

   /project-root 
   -- /stylesheets 
   -- /images 
   -- /javascripts 
   -- /font

2. Fontello css शामिल करें। बंडल में "सीएसएस" फ़ोल्डर के अंदर, आप देखेंगे:

   [yourfontname]-codes.css 
   [yourfontname]-embedded.css 
   [yourfontname]-ie7-codes.css 
   [yourfontname]-ie7.css 
   [yourfontname].css

   ज्यादातर मामलों में, आप सिर्फ़ [yourfontname].css की आवश्यकता होगी। अपनी परियोजना में स्टाइलशीट शामिल करें।

3. [yourfontname].css के अंदर @font-face नियम है जो फ़ॉन्ट आयात करता है। सुनिश्चित करें कि फोंट के पथ सही जगह पर इंगित कर रहे हैं। डिफ़ॉल्ट रूप से, वे ../font/ देखेंगे।

4. अपने आइकन का उपयोग करने के लिए, class="icon-ICON_NAME" को उस तत्व में जोड़ें जिसे आप आइकन रखना चाहते हैं। आप [yourfontname].css के नीचे आइकन नामों की सूची देख सकते हैं।

5. वैकल्पिक: Fontello आइकन पर एक margin-right: .2em डालता है, क्योंकि यह पाठ के साथ चिह्न का उपयोग करने के लिए आप की उम्मीद है, लेकिन कभी कभी आप एक स्टैंडअलोन आइकन चाहते हो सकता है। मैं स्टैंडअलोन चिह्नों के लिए <i> टैग का उपयोग करना चाहते, तो मैं fontello सीएसएस की तह तक निम्नलिखित नियम जोड़ें:

   i[class^="icon-"]:before, i[class*=" icon-"]:before { 
       margin: 0; 
   }

   अब अगर आप एक <i> टैग पर class="icon-ICON_NAME"शब्दों में कहें, यह किसी भी अवांछित मार्जिन की जरूरत नहीं होगी ।