1 Replies - 1211 Views - Last Post: 18 August 2013 - 10:57 AM

#1 buddy200   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 07-October 09

Align post icon font with post date properly

Posted 18 August 2013 - 10:31 AM

I am using icon fonts to show date icon next to post date. But they are not aligned properly. i might be missing something here.

Here is the image http://i.imgur.com/E4LYhN2.png

Here is the css part:

.entry-meta { /* Container for the entry metadata */
	clear: both;
	font-size: 13px;
	font-size: 1.3rem;
// code for icon fonts
.genericon:before {
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 16px 'Genericons';
	font-size: 1.6rem;
	vertical-align: top;
	margin-right: 5px;

.genericon-user:before { content: '\f304'; }
.genericon-month:before{ content: '\f307'; }

Is This A Good Question/Topic? 0
  • +

Replies To: Align post icon font with post date properly

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5227
  • View blog
  • Posts: 14,010
  • Joined: 18-April 07

Re: Align post icon font with post date properly

Posted 18 August 2013 - 10:57 AM

Well if you look at the genericons icons as a group (http://genericons.com/), you will notice that the calendar icon has a little space at the bottom compared to the other icons. I think you have correct alignment, it is just that calendar icon does not have the bottom of the calendar flush with the bottom of the character itself.

For instance, if you go to the website and you look at the calendar icon, compare it with the thumbtack icon just to the right of it. Notice that the end of the thumb tack is below the bottom of the calendar. So the "misalignment" is in the icon itself. But I don't think your picture looks particularly bad or horribly misaligned.

Hope you get what I am saying. If my theory is right, you could probably try an icon like triangle warning icon it would appear lined up. :)

You could try making the calendar icon sized up a pixel or two and that might correct it.

This post has been edited by Martyr2: 18 August 2013 - 10:58 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1