0

so I though about using svg files for icons. for e.g. like this

.icon-page{
    background-image: url("../../layout/icons.svg");
    background-size: 2em 2em;
}

I would like it to scale with the font-size of the user, which is why I figured I use em. But if the users default font-size is something like 23px or so, the svg is all blurry because the icons can not fit perfectly into the pixels. Is there a way to get around that? Can I detect the users font-size with a mediaquery and set the icon font-size to a certain value to make sure the icons look okay?

Comparison 22px (bad/blurry) to 24px (correct)

enter image description here enter image description here

Demo: http://jsfiddle.net/TgHLf/17/

4

0 回答 0