How to add an X icon to your 17th Avenue theme

The icon library used in our themes, Fontello, does not include an X (formerly Twitter) icon. But fret not! You can add a custom X icon using an SVG. We'll show you how in this tutorial.

This tutorial does not apply to our Kadence child themes, which have an X icon built in. This tutorial also does not apply to Clover (X icon not currently available for Clover).

How to add an X icon

1. Go to your WordPress dashboard > Appearance > Widgets.

Note: The placement of social icons can vary widely between themes. Most themes display social icons in 2+ different widget areas, so you'll want to consult the theme documentation for your specific theme. Each theme has a "Social Icons" tutorial with in-depth instructions for your theme.

2. Locate your social icons in one of the widget areas.

3. Copy the following code:

<a href="LINK TO YOUR X PROFILE" target="_blank" aria-label="X" alt="X">
<span class="social"><i class="x-svg">
<svg height="13px" width="13px" viewbox="0 0 512 512"><g fill="#000000">

<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"/></g></svg>

</i></span></a>

4. Paste the code right before </div> at the end of your social icons code.

Optional: If you prefer, you can place the X icon in a different position relative to the other icons. The different icon sections should be easy to discern – just paste the X icon code in between two existing icon sections.

5. Now, let's take a look at the code for your new X icon and learn how to customize it.

First line: You'll replace LINK TO YOUR X PROFILE with the link/URL of your X profile. Be sure to include the full link, including https://

Second line: Nothing to change here; leave as-is.

Third line: There are three things that can be changed here:

  • Height: Change 13px to your desired icon height.
  • Width: Change 13px to your desired icon width.
  • Icon color: Change #000000 to your desired color hex code.

The rest: Leave as-is.

6. Save the widget, and you're all set! Repeat for any other social icon widgets on your site.

7. Optional: If your icon is not displaying perfectly in line with the other icons, click here and copy the code. Paste this at Appearance > Customize > Additional CSS.

How to add a hover color to your X icon

If you'd like to add a hover color to your X icon, this can be achieved with a simple CSS snippet.

1. Click here and copy the code.

2. Go to Appearance > Customize > Additional CSS.

3. Paste the code at the top of the box. Replace #999999 with your desired color hex code.

4. Click Publish to save.