Problemi di riempimento (?) Con carattere icona personalizzata. Esempio sotto

Ho creato un font con icone personalizzate .svg e sto avendo un problema con il padding (o forse qualcos'altro). Le icone che ho usato per non includere alcun padding, nel caso in cui la domanda si presenta.Problemi di riempimento (?) Con carattere icona personalizzata. Esempio sotto

Per qualche motivo, le icone sembrano essere spostate in alto dove dovrebbero essere e non riesco a trovare alcun modo per riportarle nel contenitore. Ecco un esempio di ciò di cui sto parlando: http://i.imgur.com/RwOKWLp.png

Ho impostato il "colore di sfondo" in giallo per evidenziare il mio problema.

Ecco il codice HTML per un'icona:

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

Ecco il CSS che sto attualmente lavorando con:

[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; 
}

@ codice font-face:

@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; 
}

Qualcuno ha idea del perché questo potrebbe accadere?

fonte

2013-04-23 cable_ready

Stai usando Icomoon? In tal caso, hai provato a fare clic sul pulsante Modifica e poi a fare clic su una delle icone? Assicurati che l'icona sia correttamente allineata alla griglia. –

Lo sono, l'ho usato per importare tutti gli SVG e creare il carattere dell'icona. Controllo proprio lì e purtroppo questo non è un problema, tutto è allineato alla griglia. Grazie per il suggerimento. –

Deve essere qualcosa sul carattere stesso. Provato esperimenti con "typicon", sembra buono: http://jsfiddle.net/naivists/WE5ej/ – naivists

Il problema non sono i CSS, ma il vostro font altezza basale (vedi http://icomoon.io/#docs/font-metrics)

Significa le metriche di carattere sono sbagliate. Non so se li hai cambiati o se si è trattato di un bug di Icomoon, ma in questo momento sono stato in grado di esportare un font corretto.

In ogni caso non è possibile (o almeno non si dovrebbe) "correggere" questo con i CSS. Il modo migliore è cambiare il carattere.

fonte

2013-04-24 15:22:37 MatTheCat

Penso che tu abbia ragione sui soldi qui. Sembra essere un problema con l'altezza della linea di base. Tuttavia, non aveva niente a che vedere con Iconmoon. Ho dimenticato con noncuranza di usare l'essenziale "Oggetto> tavole da disegno> Adatta ai limiti del disegno" in Illustrator. Grazie mille per il tuo aiuto. Problema risolto. –

Problemi di riempimento (?) Con carattere icona personalizzata. Esempio sotto

risposta

Problemi correlati