commadelimited/jQuery-Mobile-Icon-Pack

many icons are offset, not centered

Closed this issue · 3 comments

See the screenshot:
(http://imageshack.com/a/img32/8409/p6wx.png)
icon-pack-icon-offset

This was a random sampling. Not all of the icons are offset, but many are. I downloaded the icon pack using the git clone command. The screenshot was taken from the index.html file opened directly from the folder.

The screenshot was taken in Safari 6.1.2, but the icons have the same offset in Firefox 27.0.1

@musicelect This is intentional (for now at least). There's so many custom implementations of jQM applications nowadays that even if I positioned each icon, your app's placement of those icons might be off, or someone else's might be off. For the time being I plan on leaving the icons as is, and get the developers to position them as needed for their specific application. If enough people bring it to my attention then I'll implement a solution for it.

Can you point me to a forum thread or other source on how to position the icons? I've tried to search, but those are such generic terms I couldn't find any info about it.

Mark

On Mar 6, 2014, at 9:33 PM, Andy Matthews notifications@github.com wrote:

@musicelect This is intentional (for now at least). There's so many custom implementations of jQM applications nowadays that even if I positioned each icon, your app's placement of those icons might be off, or someone else's might be off. For the time being I plan on leaving the icons as is, and get the developers to position them as needed for their specific application. If enough people bring it to my attention then I'll implement a solution for it.


Reply to this email directly or view it on GitHub.

@musicelect It's easy enough. In your CSS, for the icon you'd like to position, add a background-position declaration. So for example the first icon in the demo page, adjust, might look like this if I wanted to reposition it:

.ui-icon-adjust:after {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20enco….985%2028.739%20107.562z%22%20fill%3D%22%23ffffff%22%20%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: 4px 3px;
}

You can use any unit you'd like, but you'd need to have that block above for each icon, by name.