Can't get icon in ::before to move

[susannelson]

URL: http://goo.gl/FC34qG

I’m using the following HTML to add a dashicon to the very top bar of the above site:

<span class="sans time">Service Times:</span>  &nbsp;  Sundays 9:00 am & 10:30 am

And the CSS:

.top-bar-left .time::before {
    content: "\f469";
    font: 16px/1 "dashicons";
	padding-top: 8px;
}

For some reason, adding the padding to the top isn’t working to move the icon down so it’s lined up with the text. I’ve tried using margin, as well, with no success.

I know this must be something simple, but I can’t figure out how to move the clock icon down. Can you see what I’m missing?

[PaulOB]

@susannelson

.top-bar-left .time::before {
content: “\f469”;
font: 16px/1 “dashicons”;
padding-top: 8px;
}

Hi,

Padding-top or vertical margins will not have a real effect on inline elements so you can either set the element to inline-block.

.top-bar-left .time::before {
    content: "\f469";
    font: 16px/1 "dashicons";
	padding-top: 0;
display:inline-block;
vertical-align:middle;
}

Or more easily just use relative position to nudge it into position.

.top-bar-left .time::before {
    content: "\f469";
    font: 16px/1 "dashicons";
padding-top:0;
position:relative;
top:.3em;
}

This is one of the few times when relative positioning is the right method to use.

[susannelson]

Thank you so much, Paul! That worked perfectly.