Solved

How do I change the Twitter icon from the bird to the new X icon

19Ideas
Visitor
2 0 1

I'm using the Publisher theme and in the social-icons.liquid it has 

render 'icon-twitter' 

 

and I'm just looking to change the icon from the "old" bird logo to the new X logo 

like if it was font awesome, which i use on other site

Accepted Solution (1)

Shay
Shopify Staff
2909 453 592

This is an accepted solution.

Hi @19Ideas 

 

I can definitely help you with this! While this will most likely be updated in newer versions of your theme file, you can go ahead and make this change now to stay on top of it. Fontawesome does have a version of the new logo available, and you can find that here: X Twitter Icon | Font Awesome. Set the color to your preferred color to match the rest of your icons and then grab the SVG code for it.

 

Next you will want to head over to your store admin. You will want to update the SVG for the icon, and you can find that in your theme file code under Snippets > icon-twitter.liquid. 

 

IMPORTANT: I am not a trained developer, this is only a suggestion. This tutorial is considered an advanced customization. Changes to your theme file code could cause issues in other areas of your theme or cause theme instability. If you are not comfortable making coding changes yourself or are unsure how the change could affect your theme, please hire a developer to assist you.

 

We always recommend duplicating your theme file before making any theme code changes so that you have a safe recovery point if something goes wrong.

 

I was able to replace the information provided by FontAwesome in that theme code section. This is what mine looked like:

 

<svg xmlns="http://www.w3.org/2000/svg" height="1em" aria-hidden="true" focusable="false" class="icon icon-twitter" viewBox="0 0 512 512">
  <style>svg{fill:#ffffff}</style><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>

 And this is how it rendered on the website:

19-26-16872-6515

 

I recommend maintaining your original icon code in the same page of your code editor by wrapping it in a comment code, stopping it from rendering but keeping it for easy recovery:

{% comment %} Comment Code {% endcomment %}

 

Let me know if that worked for you!

Shay | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 3 (3)

Shay
Shopify Staff
2909 453 592

This is an accepted solution.

Hi @19Ideas 

 

I can definitely help you with this! While this will most likely be updated in newer versions of your theme file, you can go ahead and make this change now to stay on top of it. Fontawesome does have a version of the new logo available, and you can find that here: X Twitter Icon | Font Awesome. Set the color to your preferred color to match the rest of your icons and then grab the SVG code for it.

 

Next you will want to head over to your store admin. You will want to update the SVG for the icon, and you can find that in your theme file code under Snippets > icon-twitter.liquid. 

 

IMPORTANT: I am not a trained developer, this is only a suggestion. This tutorial is considered an advanced customization. Changes to your theme file code could cause issues in other areas of your theme or cause theme instability. If you are not comfortable making coding changes yourself or are unsure how the change could affect your theme, please hire a developer to assist you.

 

We always recommend duplicating your theme file before making any theme code changes so that you have a safe recovery point if something goes wrong.

 

I was able to replace the information provided by FontAwesome in that theme code section. This is what mine looked like:

 

<svg xmlns="http://www.w3.org/2000/svg" height="1em" aria-hidden="true" focusable="false" class="icon icon-twitter" viewBox="0 0 512 512">
  <style>svg{fill:#ffffff}</style><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>

 And this is how it rendered on the website:

19-26-16872-6515

 

I recommend maintaining your original icon code in the same page of your code editor by wrapping it in a comment code, stopping it from rendering but keeping it for easy recovery:

{% comment %} Comment Code {% endcomment %}

 

Let me know if that worked for you!

Shay | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

19Ideas
Visitor
2 0 1

This was perfect, thanks! I had to change the fill to be #000 since i needed it black but it's all set, thanks!!! 

 

in place and looking great at https://matthewcranestudios.com/

Shay
Shopify Staff
2909 453 592

Awesome! I am so glad you were able to make it work. 

 

Your art is very impressive and I really enjoyed browsing your collection. Did you need help with anything else on your website?

Shay | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog