पैडिंग समस्याएं (?)।

Question

से नीचे उदाहरण मैंने कस्टम .svg आइकन का उपयोग करके एक आइकन फ़ॉन्ट बनाया है और मुझे पैडिंग (या संभवतः कुछ और) में कोई समस्या है। यदि प्रश्न उठता है तो आइकन में मैंने कोई पैडिंग शामिल नहीं किया था।

किसी कारण से, आइकन ऊपर से स्थानांतरित हो गए हैं जहां वे होना चाहिए और मुझे कंटेनर में वापस लाने के लिए कोई रास्ता नहीं मिल रहा है। यहां एक उदाहरण दिया गया है कि मैं किस बारे में बात कर रहा हूं: http://i.imgur.com/RwOKWLp.png

मैंने अपनी समस्या को हाइलाइट करने के लिए पीले रंग में "पृष्ठभूमि रंग" सेट किया है।

यहाँ एक आइकन के लिए HTML है:

[data-icon]:before { 
    font-family: 'iconfont'; 
    content: attr(data-icon); 
    speak: none; 
    font-size: 100%; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
} 

.vicon { 
    display: inline-block; 
    font-size: 50px; 
    margin-top: 1em; 
    background-color: yellow; 
} 

@ फॉन्ट-फेस कोड:

@font-face { 
font-family: 'iconfont'; 
src:url('[font_location_on_company_server].eot'); 
src:url('[font_location_on_company_server].eot?#iefix') format('embedded-opentype'), 
    url('[font_location_on_company_server].woff') format('woff'), 
    url('[font_location_on_company_server].ttf') format('truetype'), 
    url('[font_location_on_company_server].svg#icon_font') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 

<div class="vicon" aria-hidden="true" data-icon="&#xe001;"></div> 

यहाँ सीएसएस कि मैं वर्तमान में साथ काम कर रहा हूँ है क्या किसी को कोई विचार है कि यह क्यों हो रहा है?

Answer 1

समस्या सीएसएस नहीं है, लेकिन अपने फ़ॉन्ट के आधारभूत ऊंचाई (http://icomoon.io/#docs/font-metrics देखें)

इसका मतलब फ़ॉन्ट मैट्रिक्स गलत हैं। मुझे नहीं पता कि क्या आपने उन्हें बदल दिया है या यदि यह आईकॉमून से एक बग था, लेकिन मैं अभी एक सही फ़ॉन्ट निर्यात करने में सक्षम हूं।

वैसे भी आप सीएसएस के साथ "सही" नहीं कर सकते हैं (या कम से कम आपको नहीं करना चाहिए)। फ़ॉन्ट बदलने के लिए सबसे अच्छा तरीका है।