SVG Icons to Header - One Out Of Alignment

Solved
AmandaMeadows
Tourist
3 0 1

Hi,

I followed this thread https://community.shopify.com/c/Shopify-Design/FAQ-Accordions/td-p/309814 to add Instagram to the header of this website that I'm helping a friend with:

https://whiteheatherboutique.com/

Instagram worked okay after following all of the instructions in the above thread but when I've added a Facebook svg (saved an svg to assets), there's padding at the bottom and the icon floats above the other icons on the top right. Please can someone let me know how to fix this? (code below that I've used)

<div class="grid__item one-half small--one-whole site-footer-item-tall"><ul class="list--inline site-footer__social-icons social-icons site-footer__icon-list">
				<li class="social-icons__item">
				
				<a class="social-icons__link" href="https://www.facebook.com/whiteheatherboutique" aria-describedby="a11y-external-message"><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-instagram" viewBox="0 0 512 512">
					<img src="{{ 'facebook.svg' | asset_url }}" alt="Facebook" >
					
					<circle cx="390.5" cy="121.5" r="30.2"></circle></svg><span class="icon__fallback-text">Facebook</span>
                  </a>
                </li>
				<li class="social-icons__item">
				
				<a class="social-icons__link" href="https://www.instagram.com/white.heather.boutique_morley/" aria-describedby="a11y-external-message"><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-instagram" viewBox="0 0 512 512"><path d="M256 49.5c67.3 0 75.2.3 101.8 1.5 24.6 1.1 37.9 5.2 46.8 8.7 11.8 4.6 20.2 10 29 18.8s14.3 17.2 18.8 29c3.4 8.9 7.6 22.2 8.7 46.8 1.2 26.6 1.5 34.5 1.5 101.8s-.3 75.2-1.5 101.8c-1.1 24.6-5.2 37.9-8.7 46.8-4.6 11.8-10 20.2-18.8 29s-17.2 14.3-29 18.8c-8.9 3.4-22.2 7.6-46.8 8.7-26.6 1.2-34.5 1.5-101.8 1.5s-75.2-.3-101.8-1.5c-24.6-1.1-37.9-5.2-46.8-8.7-11.8-4.6-20.2-10-29-18.8s-14.3-17.2-18.8-29c-3.4-8.9-7.6-22.2-8.7-46.8-1.2-26.6-1.5-34.5-1.5-101.8s.3-75.2 1.5-101.8c1.1-24.6 5.2-37.9 8.7-46.8 4.6-11.8 10-20.2 18.8-29s17.2-14.3 29-18.8c8.9-3.4 22.2-7.6 46.8-8.7 26.6-1.3 34.5-1.5 101.8-1.5m0-45.4c-68.4 0-77 .3-103.9 1.5C125.3 6.8 107 11.1 91 17.3c-16.6 6.4-30.6 15.1-44.6 29.1-14 14-22.6 28.1-29.1 44.6-6.2 16-10.5 34.3-11.7 61.2C4.4 179 4.1 187.6 4.1 256s.3 77 1.5 103.9c1.2 26.8 5.5 45.1 11.7 61.2 6.4 16.6 15.1 30.6 29.1 44.6 14 14 28.1 22.6 44.6 29.1 16 6.2 34.3 10.5 61.2 11.7 26.9 1.2 35.4 1.5 103.9 1.5s77-.3 103.9-1.5c26.8-1.2 45.1-5.5 61.2-11.7 16.6-6.4 30.6-15.1 44.6-29.1 14-14 22.6-28.1 29.1-44.6 6.2-16 10.5-34.3 11.7-61.2 1.2-26.9 1.5-35.4 1.5-103.9s-.3-77-1.5-103.9c-1.2-26.8-5.5-45.1-11.7-61.2-6.4-16.6-15.1-30.6-29.1-44.6-14-14-28.1-22.6-44.6-29.1-16-6.2-34.3-10.5-61.2-11.7-27-1.1-35.6-1.4-104-1.4z"></path><path d="M256 126.6c-71.4 0-129.4 57.9-129.4 129.4s58 129.4 129.4 129.4 129.4-58 129.4-129.4-58-129.4-129.4-129.4zm0 213.4c-46.4 0-84-37.6-84-84s37.6-84 84-84 84 37.6 84 84-37.6 84-84 84z"></path><circle cx="390.5" cy="121.5" r="30.2"></circle></svg><span class="icon__fallback-text">Instagram</span>
                  </a>
                </li></ul></div>



Thank you in advance.

Kind regards,
Amanda


0 Likes
PeanutButter
Shopify Partner
330 66 137

This is an accepted solution.

Hi @AmandaMeadows, inside the facebook link you have 2 SVGs right now, and also a <circle> tag which is not needed

Here is a cleaner version of your code:

<div class="grid__item one-half small--one-whole site-footer-item-tall">
   <ul class="list--inline site-footer__social-icons social-icons site-footer__icon-list">
      <li class="social-icons__item">
         <a class="social-icons__link" href="https://www.facebook.com/whiteheatherboutique" aria-describedby="a11y-external-message">
         <img src="{{ 'facebook.svg' | asset_url }}" alt="Facebook" >
         <span class="icon__fallback-text">Facebook</span>
         </a>
      </li>
      <li class="social-icons__item">
         <a class="social-icons__link" href="https://www.instagram.com/white.heather.boutique_morley/" aria-describedby="a11y-external-message">
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-instagram" viewBox="0 0 512 512">
               <path d="M256 49.5c67.3 0 75.2.3 101.8 1.5 24.6 1.1 37.9 5.2 46.8 8.7 11.8 4.6 20.2 10 29 18.8s14.3 17.2 18.8 29c3.4 8.9 7.6 22.2 8.7 46.8 1.2 26.6 1.5 34.5 1.5 101.8s-.3 75.2-1.5 101.8c-1.1 24.6-5.2 37.9-8.7 46.8-4.6 11.8-10 20.2-18.8 29s-17.2 14.3-29 18.8c-8.9 3.4-22.2 7.6-46.8 8.7-26.6 1.2-34.5 1.5-101.8 1.5s-75.2-.3-101.8-1.5c-24.6-1.1-37.9-5.2-46.8-8.7-11.8-4.6-20.2-10-29-18.8s-14.3-17.2-18.8-29c-3.4-8.9-7.6-22.2-8.7-46.8-1.2-26.6-1.5-34.5-1.5-101.8s.3-75.2 1.5-101.8c1.1-24.6 5.2-37.9 8.7-46.8 4.6-11.8 10-20.2 18.8-29s17.2-14.3 29-18.8c8.9-3.4 22.2-7.6 46.8-8.7 26.6-1.3 34.5-1.5 101.8-1.5m0-45.4c-68.4 0-77 .3-103.9 1.5C125.3 6.8 107 11.1 91 17.3c-16.6 6.4-30.6 15.1-44.6 29.1-14 14-22.6 28.1-29.1 44.6-6.2 16-10.5 34.3-11.7 61.2C4.4 179 4.1 187.6 4.1 256s.3 77 1.5 103.9c1.2 26.8 5.5 45.1 11.7 61.2 6.4 16.6 15.1 30.6 29.1 44.6 14 14 28.1 22.6 44.6 29.1 16 6.2 34.3 10.5 61.2 11.7 26.9 1.2 35.4 1.5 103.9 1.5s77-.3 103.9-1.5c26.8-1.2 45.1-5.5 61.2-11.7 16.6-6.4 30.6-15.1 44.6-29.1 14-14 22.6-28.1 29.1-44.6 6.2-16 10.5-34.3 11.7-61.2 1.2-26.9 1.5-35.4 1.5-103.9s-.3-77-1.5-103.9c-1.2-26.8-5.5-45.1-11.7-61.2-6.4-16.6-15.1-30.6-29.1-44.6-14-14-28.1-22.6-44.6-29.1-16-6.2-34.3-10.5-61.2-11.7-27-1.1-35.6-1.4-104-1.4z"></path>
               <path d="M256 126.6c-71.4 0-129.4 57.9-129.4 129.4s58 129.4 129.4 129.4 129.4-58 129.4-129.4-58-129.4-129.4-129.4zm0 213.4c-46.4 0-84-37.6-84-84s37.6-84 84-84 84 37.6 84 84-37.6 84-84 84z"></path>
               <circle cx="390.5" cy="121.5" r="30.2"></circle>
            </svg>
            <span class="icon__fallback-text">Instagram</span>
         </a>
      </li>
   </ul>
</div>

 If still you get the facebook icon to be out of alignment, add the following to your Assets/theme.scss.liquid file:

#shopify-section-header .social-icons__link {
    height: 24px;
}

 

If my fix solves your issue please remember to Like and Accept

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
AmandaMeadows
Tourist
3 0 1

Hi,

Thank you very much for this, you're a star! I've implemented your suggestions and the icons are still a little bit out of alignment - any ideas of how I can do this last minor little tweak?

0 Likes
PeanutButter
Shopify Partner
330 66 137

Can you try to add the following css to Assets/theme.scss.liquid?

.site-header .icon-instagram {
    margin-top: -6px;
}
Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
AmandaMeadows
Tourist
3 0 1

Thank you, you're a star!!