Problemy z wypełnieniem (?) Z niestandardową czcionką ikony. Przykład poniżej:

Question

Utworzono czcionkę ikony przy użyciu niestandardowych ikon .svg i mam problem z dopełnieniem (lub prawdopodobnie z czymś innym). Ikony, których użyłem nie zawierały dopełnienia, na wypadek, gdyby pojawiło się pytanie.

Z jakiegoś powodu ikony wydają się przesuwać powyżej miejsca, w którym powinny być i nie mogę znaleźć żadnego sposobu, aby je z powrotem do pojemnika. Oto przykład tego, o czym mówię: http://i.imgur.com/RwOKWLp.png

Ustawiłem "kolor tła" na żółty, aby podkreślić mój problem.

Oto HTML dla jednej ikony:

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

Oto CSS Obecnie pracuję z:

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

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

Czy ktoś ma pojęcie, dlaczego tak się dzieje?

Answer 1

Problemem nie jest CSS ale czcionka jest wysokość bazowa (patrz http://icomoon.io/#docs/font-metrics)

Oznacza to metryki czcionki są błędne. Nie wiem, czy je zmieniłeś, czy też był to błąd z Icomoon, ale w tej chwili udało mi się wyeksportować poprawną czcionkę.

W każdym razie nie możesz (a przynajmniej nie powinieneś) "poprawić" to za pomocą CSS. Najlepszym sposobem jest zmiana czcionki.