{"action":"created","issue":{"url":"https://api.github.com/repos/erikflowers/weather-icons/issues/146","repository_url":"https://api.github.com/repos/erikflowers/weather-icons","labels_url":"https://api.github.com/repos/erikflowers/weather-icons/issues/146/labels{/name}","comments_url":"https://api.github.com/repos/erikflowers/weather-icons/issues/146/comments","events_url":"https://api.github.com/repos/erikflowers/weather-icons/issues/146/events","html_url":"https://github.com/erikflowers/weather-icons/issues/146","id":140825484,"number":146,"title":"Vertical Centering","user":{"login":"polarathene","id":5098581,"avatar_url":"https://avatars.githubusercontent.com/u/5098581?v=3","gravatar_id":"","url":"https://api.github.com/users/polarathene","html_url":"https://github.com/polarathene","followers_url":"https://api.github.com/users/polarathene/followers","following_url":"https://api.github.com/users/polarathene/following{/other_user}","gists_url":"https://api.github.com/users/polarathene/gists{/gist_id}","starred_url":"https://api.github.com/users/polarathene/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/polarathene/subscriptions","organizations_url":"https://api.github.com/users/polarathene/orgs","repos_url":"https://api.github.com/users/polarathene/repos","events_url":"https://api.github.com/users/polarathene/events{/privacy}","received_events_url":"https://api.github.com/users/polarathene/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":13,"created_at":"2016-03-14T23:28:49Z","updated_at":"2016-04-05T05:42:07Z","closed_at":null,"body":"I was making a UI using large icons to map to the weather condition. I was trying to get horizontal/vertical centering but while `wi-day-sunny` seems good for this `wi-thunderstorm` seems to have a bias towards the baseline. I imagine that many icons will be like that.\r\n\r\nAny chance of supporting aligning the icons vertically? I am using these with React-Native so am lacking many CSS features, I could manually mess around with offsets I guess, but perhaps exporting the font icons vertically aligned by centering them on the baseline would work too? Is there a benefit to icons like `wi-thunderstorm` aligning to the baseline instead of like how `wi-day-sunny` is aligned vertically?"},"comment":{"url":"https://api.github.com/repos/erikflowers/weather-icons/issues/comments/205655184","html_url":"https://github.com/erikflowers/weather-icons/issues/146#issuecomment-205655184","issue_url":"https://api.github.com/repos/erikflowers/weather-icons/issues/146","id":205655184,"user":{"login":"polarathene","id":5098581,"avatar_url":"https://avatars.githubusercontent.com/u/5098581?v=3","gravatar_id":"","url":"https://api.github.com/users/polarathene","html_url":"https://github.com/polarathene","followers_url":"https://api.github.com/users/polarathene/followers","following_url":"https://api.github.com/users/polarathene/following{/other_user}","gists_url":"https://api.github.com/users/polarathene/gists{/gist_id}","starred_url":"https://api.github.com/users/polarathene/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/polarathene/subscriptions","organizations_url":"https://api.github.com/users/polarathene/orgs","repos_url":"https://api.github.com/users/polarathene/repos","events_url":"https://api.github.com/users/polarathene/events{/privacy}","received_events_url":"https://api.github.com/users/polarathene/received_events","type":"User","site_admin":false},"created_at":"2016-04-05T05:42:07Z","updated_at":"2016-04-05T05:42:07Z","body":"@erikflowers Ok so the cloud is aligned along the baseline right? I'm looking at this image for reference:\r\n\r\n![font settings](http://www.myfirstfont.com/images/glyphterms.gif)\r\n\r\nI understand how that works, with regular text. The line height I was referring to might be the in font terms the distance/height between the ascender and descender lines, IcoMoon [explain under Font Metrics](https://icomoon.io/docs.html) how they use this method to center their icons vertically:\r\n\r\n> The IcoMoon app aligns the top of the icon canvas to the ascender line and its bottom to the descender line of the font. Using this technique, the size of your font will directly translate to the size of the icon. For example, if you set your font-size in CSS to be 16px, you will get a 16px icon. This method was first introduced by IcoMoon.\r\n\r\nThis sounds like it's exactly what I'm proposing, I can give it a go and let you know how it goes? In case I'm still not clear, this variant would not be paired with text or any other icons in the set, so respecting alignment along the baseline is not required. It would be useful for things like lists in an app where the icon tile is aligned to the left/right edge and another element will contain text that does not need to align to the weather icon.\r\n\r\nSome examples where the current font wouldn't be appropriate but a vertically centered version would:\r\n![example 1](http://cdn2.frip.in/wp-content/uploads/2015/05/J.B-weather-widget-plugin.jpg)\r\n![example 2](https://cdn.welovesolo.com/wp-content/uploads/vecteezy/09/0bsiulkm1wu.jpg)\r\n![example 3](http://www.titanui.com/wp-content/uploads/2013/12/23/Fatih-Ocaks-Flat-UI-Elements-PSD.jpg)\r\n![example 4](http://orig00.deviantart.net/1d79/f/2013/028/b/6/weather_widget_by_alexdesigns-d5t2abc.png)\r\n![example 5](http://www.pixelusdesign.com/wp-content/uploads/weather-widget.jpg)\r\n\r\nAnd with this design it'd make sense for the current font for the week row, but vertically aligned font for the day view, otherwise the lightning may intersect with the location text, along with undesirable uneven/inconsistent whitespace vertically:\r\n![example 6](http://123poly.com/wp-content/uploads/2015/08/weather-widget-7-18.png)"}}