Kadence - Add an Etsy icon

In this tutorial, we'll show you how to add an Etsy icon to your 17th Avenue Kadence theme.

1. In your WordPress dashboard, head to Appearance > Customize. 

2. In the Customizer preview on the right, hover your cursor over a social icons block where you'd like to add the Etsy icon (for example, inside the top navigation menu). Once hovered, click the blue pencil icon to edit the block.

3. Social settings should appear on the left, and you'll see a list of active icons. Underneath the list of icons, click Add Social +.

4. Scroll to the bottom and select Custom 1.

5. Open the icon using the downward pointing arrow, and then click on SVG.

6. In the SVG HTML box, add the following SVG code:

<svg viewBox="0 0 384 512"><path d="M384 348c-1.8 10.8-13.8 110-15.5 132-117.9-4.3-219.9-4.7-368.5 0v-25.5c45.5-8.9 60.6-8 61-35.3 1.8-72.3 3.5-244.1 0-322-1-28.5-12.1-26.8-61-36v-25.5c73.9 2.4 255.9 8.6 363-3.8-3.5 38.3-7.8 126.5-7.8 126.5H332C320.9 115.7 313.2 68 277.3 68h-137c-10.3 0-10.8 3.5-10.8 9.8V241.5c58 .5 88.5-2.5 88.5-2.5 29.8-1 27.6-8.5 40.8-65.3h25.8c-4.4 101.4-3.9 61.8-1.8 160.3H257c-9.2-40.1-9.1-61-39.5-61.5 0 0-21.5-2-88-2v139c0 26 14.3 38.3 44.3 38.3H263c63.6 0 66.6-25 98.8-99.8H384z"/></svg>

7. In the Max Width field, put 14 or your preferred width.

8. To link the icon to your Etsy shop URL, click on "Set Social Links" (or navigate to Appearance > Customize > General > Social Links). Scroll down and find Custom 1. Add your Etsy shop URL in the Custom 1 field.

9. Repeat steps 1-7 for social icons in other areas of your site. Icons are most commonly found in the header/desktop navigation, mobile navigation, and site footer.

Note: This tutorial applies to the Kadence Social Icons blocks only, which are controlled via the Customizer. You may have other social icons on your site, such as a social icons widget in your sidebar or on the Instagram landing page. These use a WordPress Social Icons block, which does not allow custom icons at this time.