Genesis - How to add a LiketoKnow.It icon to your theme

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

This tutorial applies to our Genesis child themes only (excluding Clover, which already has an LTK icon). Not compatible with our Kadence child themes.

How to add an LTK 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 in full:

<a href="LINK TO YOUR LTK PROFILE" target="_blank" aria-label="LiketoKnow.It" alt="LiketoKnow.It">
<span class="social"><i class="ltk-svg">
<svg height="14px" width="14px" viewbox="0 0 354 354"><g fill="#000000">

<path d="m158.2 351.9c-14.7-1.6-38.2-7.3-38.2-9.3 0-.6 10.3-11.399 22.8-23.899l22.8-22.8 13.4-.301c25.8-.699 47.8-8 67.8-22.3 4.7-3.399 7.4-4.8 7.7-4 .3.601 3.9 13.8 8 29.2 6.9 26 7.3 28.1 5.7 29.4-3.3 2.699-25.9 13-34.7 15.899-23.9 7.901-50.1 10.701-75.3 8.101z"/><path d="m84.9 326.9c-33.1-19.9-59.4-51.8-73.2-88.9-3.7-10.1-8.4-27.7-7.5-28.5.3-.3 13.3 2.9 28.9 7 15.6 4.2 30 8 32 8.5 2.7.8 3.9 1.9 5.3 4.7 3.7 7.899 12.8 20.5 20.3 28.399 10.5 11 21.4 19 35.5 25.801l11.7 5.699-21.2 21.2c-11.7 11.701-21.7 21.201-22.3 21.201s-4.9-2.3-9.5-5.1z"/><path d="m290.6 309.2c-.3-.9-4.199-15.3-8.6-32l-8-30.3 5.5-9c13.2-22 19.2-48.101 16.6-72.601-.6-6.4-.899-11.8-.699-12.1.399-.4 43.1 9.6 55.1 12.9l3.5 1v7.8c0 17.9-3.6 40.6-9.1 57.3-4.2 13-15.601 35.5-23.601 46.8-6.6 9.1-24.899 29.2-28.399 31.1-1.301.701-1.901.501-2.301-.899z"/><path d="m139.6 220.3-37.6-33.8v-22.6-22.6l16.6-14.9c9.2-8.2 17-14.9 17.4-14.9s9.8 8.2 21 18.2l20.3 18.1 18-16.1c9.8-8.9 19.2-17.2 20.7-18.4l2.8-2.3 17 15.3 17.101 15.2v22.5 22.5l-33 29.5c-18.101 16.2-35.101 31.4-37.801 33.8l-4.9 4.2z"/><path d="m46.5 195c-5.5-1.6-18-4.9-27.8-7.5l-17.7-4.8v-10.5c0-37.5 14.5-77 39.7-108.2 6.5-8 19.5-21 21-21 .8 0 18.3 60 18.3 62.7 0 .5-2.2 4.7-4.9 9.2-6.2 10.2-10.6 20.7-13.9 33-2.2 8.4-2.5 11.7-2.6 26.6-.1 9.4.2 18.5.6 20.3.9 4 .8 4-12.7.2z"/><path d="m317.3 132.8-32.2-8-4-7.3c-7.6-13.8-21.5-29-35.3-38.8-6.8-4.9-23.3-13.7-25.5-13.7-.7 0-1.3-.3-1.3-.8 0-1.1 41-43.2 42.1-43.2.5 0 4.101 1.9 8 4.3 34.6 20.7 63.4 56.8 75.7 94.7 2.8 8.6 5.4 19 5 20-.2.4-14.8-2.8-32.5-7.2z"/><path d="m99.7 84.2c-1.5-2.7-15.8-56.4-15.4-57.5.9-2.4 24.1-13.6 36.6-17.7 17.1-5.6 31-8.1 49.3-8.7 19.399-.7 34 .8 51.6 5.3 7.4 1.9 13.8 3.7 14.4 4 .6.4-9.5 11.2-22.3 24l-23.4 23.4h-11.5c-26.7 0-50.7 7.6-71.7 22.6-4 2.9-7.4 5-7.6 4.6z"/></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 LTK icon in a different position relative to the other icons. The different icon sections should be easy to discern – just paste the LTK icon code in between two existing icon sections.

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

First line: You'll replace LINK TO YOUR LTK PROFILE with the link/URL of your LTK 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 LTK icon

If you'd like to add a hover color to your LTK 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.