[Resolved] Lining Up SVG Icons Properly

[Alan]

In customizer, I have the icon type set to svg and for whatever reason, I can not line up the icon horizontally with the text following it. It does not matter whether it is Bootstrap or Ionicons (I am seeking Font Awesome alternatives) or whatever. The code is as follows:

`<svg xmlns=”http://www.w3.org/2000/svg&#8221; width=”32″ height=”32″ fill=”currentColor” class=”bi bi-envelope” viewBox=”0 0 16 16″>
<path d=”M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z”/>
</svg> <a href=”mailto:info@savacations.com”>info@savacations.com</a>`

Are you able to help with this?

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Alan]

Leo:

This is a page that I use for testing content before it goes live. I am referring to the phone numbers and email icon at the very top of the page (ignore everything else). Maybe I am crazy, but the email icon is about 1/3 of the way up the i in “info”. I am trying to have all of the svg icons line up horizontally with the text. These particular icons belong to Bootstrap, but it doesn’t matter which set I use…

[Elvin]

Hi there,

I highly suggest using GenerateBlocks’ Heading or Button block for this. It has a built-in icon that is properly aligned so you don’t have to deal with this issue.

But to answer your concern:

Consider wrapping your text and svg icon in one wrapper for each pair so we could use vertical alignment from flexbox to align your svg and text vertically.

Alternatively, you can try this simple CSS:

svg.bi.bi-telephone {
    height: 16px;
    margin-bottom: -2px;
}

svg.bi.bi-envelope {
    height: 16px;
    margin-bottom: -2px;
}

You can adjust the margin-bottom value to your preference.

[Alan]

I am using the classic editor for everything so I am not yet a block user…Your solution worked.

Thank you.

[Elvin]

Glad it works for you. No problem. 🙂

[Author]

Posts