मैं कैसे सुनिश्चित करूँ कि प्रत्येक ग्लिफ़ की चौड़ाई समान है?

Question

मैंने देखा है कि समान फ़ॉन्ट आकार पर भी, मानक चौड़ाई नहीं है। मैं आइटमों की सूची के सामने इनका उपयोग कैसे कर सकता हूं ताकि शब्द दांतेदार न दिखें?

समस्या का स्क्रीनशॉट:

यह कोड है:

<ul id="myTab">
    <li class="active"><a href="#home"><i class="icon-tasks"></i> Proposal</a></li>
    <li><a href="#video"><i class="icon-film"></i> Videos</a></li>
    <li><a href="#asset"><i class="icon-paper-clip"></i> Assets</a></li>
    <li><a href="#payment"><i class="icon-credit-card"></i> Payment</a></li>
    <li><a href="#history"><i class="icon-calendar empty"></i> History</a></li>
</ul>

Answer 1

3.1.1 के बाद से, आप icon-fixed-widthCSS को संपादित करने के बजाय वर्ग का उपयोग कर सकते हैं ।

http://fortawesome.github.io/Font-Awesome/3.2.1/examples/#navigation

4.0 के बाद से, आपको उपयोग करना चाहिए fa-fw:
4.x https://fontawesome.com/v4.7.0/examples/#fixed-width
5.x https://fontawesome.com/how-to-use/on-the-web / स्टाइल / निश्चित-चौड़ाई-चिह्न

@ अंकलसिन को इंगित करने के लिए धन्यवाद।

Answer 2

क्या आप सुनिश्चित हैं कि आपको एक और शैली परिभाषित नहीं मिली है जो ऐसा कर रही है?

यह इस तरह से है कि आपका HTML एक ऐसी साइट पर एक फ़ाइल में रखा गया है जिसे मैंने फ़ॉन्ट विस्मयकारी रूप से उपयोग किया है:

ध्यान दें कि आइकन और टेक्स्ट कैसे अप करते हैं। जोड़ी गई लाइनों के साथ यह आपकी मूल छवि है:

ऐसा लगता है कि आपके पास एक शैली कहीं परिभाषित है जो फ़ॉन्ट विस्मयकारी स्टाइल को हटा रही है।

आप मूल फ़ॉन्ट विस्मयकारी शैली में जोड़ने से भी कोशिश कर सकते हैं ( font-awesome.cssयह देखने के लिए) कि यह अस्थायी रूप से हल करता है:

li [class^="icon-"], .nav li [class^="icon-"], 
li [class*=" icon-"], .nav li [class*=" icon-"] {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}

Comments

धन्यवाद। यह मेरे फॉन्ट-भयानक.css में नहीं था, और न ही मैंने जो फ़ाइल डाउनलोड की थी ( Fortawesome.github.io/Font-Awesome/assets/font-awesome.zip ) या यहां तक ​​कि CDN संस्करण में जो संदर्भ ( bootstrapcdn.com/) index.html? v = 05162013150137 # tab_fontawesome )। लेकिन यह काम कर गया। धन्यवाद।

— जिम होहल - सीटीओ विदाओ १13'१३

Answer 3

इस सीएसएस का उपयोग करके ग्लिफ़ या किसी भी आइकन को स्केल करना सरल और आसान है

> .fa { transform: scale(1.5,1); }

Answer 4

4.X के ऊपर Fontawesome संस्करण के लिए , टैग fa-fwमें वर्ग का उपयोग करें <i>। रेफरी: - https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons