How do you reference a Kadence icon inside a code snippet ?!!

[Dianna Cheng]

Dianna Cheng

July 11, 2024 at 1:08 pm

I am currently rebuilding an existing site and am still new to Kadence. I have looked everywhere for this and cannot find a straightforward answer, it’s driving me crazy. So I am hoping to get a straightforward answer here. How do you reference Kadence Icons inside custom code?

I’ve created a short code for follow links, it pulls content from a repeater field. Editors can select a social platform and the linked icons will be displayed in the page. I am adding this to a custom template for a custom post type. Everything needs to be dynamic where possible. The Repeater Block does NOT work for this case, hence the custom short code.

Anyway, the short code works but is not pulling in the icon and I just need to know how to properly reference kadence icons in the code so that they will display. Below is an example of what I am talking about but using icomoon svg code.

if ($name && $link) {
echo '<li class="sme-link social-' . $name . '">';
echo '<a href="' . $link . '" class="icon" title="Follow on ' . $name . '" target="_blank" rel="noopener">';
echo '<svg class="icon icon-'. $name .'"><use xlink:href="symbol-defs.svg#icon-'. $name .'"></use></svg>';
echo '</a></li>';
}