Search code examples
htmlcssfont-awesomefont-awesome-5

CSS, How to move <i> downwards or upwards without affecting inline text?

This is very hard to explain in a title, but I will show you in a jsfiddle

https://jsfiddle.net/myv50428/2/

Basically I want to move the envelope icon downwards, but not affect the test.

So it looks like so: How it should look

But for some reason it is ignoring my i tag in the css.

What it seems to be ignoring:

.envelope i {
  margin-top: 10px;
}

Hope you guys can help me!

For those wondering why I want this... It's because I need to do this to center text to the icons, for example if I have a really big icon, I will need to center the text to it.

Solution

  • Use this as your CSS:

    li {
    list-style-type: none;
}

a {
    vertical-align: top;
}

.envelope {
    margin-right: 10px;
    margin-top: 8px;
}

    The vertical-align:top sets the <a> tag to align in the way that you're looking for. You also want to style the margin-top on the .envelope class, <i> tags behave in weird ways sometimes.

    Link to updated JS Fiddle: https://jsfiddle.net/myv50428/8/

    Hope this helps!