mobile css > links with icons

[tomislav021]

Hello!
Can someone help me on this?
I dont know how to put icons in links on mobile sites.
I mean, i managed to do something but those icons are not showing nicely on mobile phone. They are pixelated… :/

Please take a look on your phone: http://picerijacrnamaca.com/m/

Thanks!

[Shikkediel]

You could use svg images instead of png. High density pixelation is the cause of this.

[tomislav021]

Can i make svg images in photoshop?
My question if also about, how do i position them, so they look nice on most mobile phones?

Thank you!

[Shikkediel]

I think you’d need Inkscape (open source) or Adobe Illustrator for it. There should also be more than a few free svg icon sets around though (or at little expense). What might also work okay is to make the png images twice as big and show them only half size on the web.

They seem to look alright (position as well) on small screen sizes for the rest. Can’t test on an actual mobile device myself.

Edit – finished svgs can also be adapted with a text editor by the way. If you know what you’re looking at (XML, very similar to HTML), colors and what not can be changed just by typing it in.

Just realised this online editor was recommended to me recently (haven’t tried it yet though, I usually do Inkscape or type it myself) :

Online svg editor

[Author]

Posts