Themify Icons Shortcode

Below, you’ll find a detailed guide on how to add the Themify Icons Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Themify Icons Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Themify Icons Plugin and the shortcodes it provides:

Themify Icons

"Themify Icons is a WordPress plugin that offers a vast library of customizable icons, enhancing the visual appeal of your website. Its user-friendly interface makes it a breeze to use."

✩✩✩✩✩ () Active Installs: 4000+ Tested with: 5.9.8 PHP Version: false

Included Shortcodes:

• [ti_icon]

Themify Icons [ti_icon] Shortcode

The Themify Icons shortcode allows you to customize icons on your WordPress site. It enables you to choose the icon, text, link, target, size, style, background color, icon color, text color, and corners. The shortcode extracts these attributes and applies them to the icon. It also checks if the selected colors are preset. If not, it applies custom colors. The output is a span class with the selected styles and attributes. If a link is provided, it wraps the icon and text in an anchor tag. The shortcode ultimately returns a styled icon that enhances the visual appeal of your site.

Shortcode: [ti_icon]

Parameters

Here is a list of all possible ti_icon shortcode parameters and attributes:

• icon – Specifies the icon to be used.
• text – The text that appears with the icon.
• link – If set, the icon and text will link to this URL.
• target – Defines where the link opens (e.g., ‘_blank’ for new tab).
• size – Adjusts the size of the icon (default is ‘default’).
• style – Determines the icon’s style (e.g., ‘icon-left’, ‘icon-boxed’).
• background_color – Sets the background color of the icon.
• icon_color – Changes the color of the icon.
• text_color – Determines the color of the text.
• corners – Defines the corner style of the icon (default is ‘square’).

Examples and Usage

Basic example – In this basic usage, the shortcode is used to display an icon without any additional parameters. The icon shown will be the default one set in the plugin settings.

[ti_icon /]

Advanced examples

Displaying an icon with customized text and link. The ‘icon’ parameter specifies the icon to be displayed. The ‘text’ parameter adds a text label to the icon. The ‘link’ parameter sets the URL that the icon will link to when clicked.

[ti_icon icon="fa-home" text="Home" link="https://www.example.com/home" /]

Using the shortcode to display an icon with customized style, size, and colors. The ‘style’ parameter changes the icon’s display style. The ‘size’ parameter sets the icon’s size. The ‘background_color’, ‘icon_color’, and ‘text_color’ parameters set the colors for the icon’s background, the icon itself, and the accompanying text, respectively.

[ti_icon icon="fa-user" style="icon-boxed" size="large" background_color="blue" icon_color="white" text_color="black" /]

Displaying an icon with a custom target for the link. The ‘target’ parameter sets the target attribute for the link, controlling how the linked resource will be opened.

[ti_icon icon="fa-envelope" link="https://www.example.com/contact" target="_blank" /]

PHP Function Code

In case you have difficulties debugging what causing issues with [ti_icon] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'ti_icon', 'themify_icons_shortcode' );

Shortcode PHP function:

function themify_icons_shortcode( $atts, $content = '' ) {
	wp_enqueue_style( 'themify-icons-frontend' );

	extract( shortcode_atts( array(
		'icon' => '',
		'text' => '',
		'link' => '',
		'target' => '',
		'size' => 'default',
		'style' => 'icon-left',
		'background_color' => '',
		'icon_color' => '',
		'text_color' => '',
		'corners' => 'square',
	), $atts, 'themify_icons' ) );

	$classes = array( 'ti_icon', 'size-' . $size, 'corner-' . $corners, $style );
	$presetColors=array( 'white', 'purple', 'pink', 'yellow', 'blue', 'darkblue', 'cyan', 'black' );

	if( $background_color != '' ) {
		if( in_array( $background_color, $presetColors,true ) ) {
			$classes[] = 'bg-color-' . $background_color;
			$background_color = '';
		} else {
			$classes[] = 'bg-color-custom';
			$background_color = 'background-color: '. esc_attr( $background_color) .';';
		}
	}

	if( $text_color != '' ) {
		if( in_array( $text_color, $presetColors,true ) ) {
			$classes[] = 'text-color-' . $text_color;
			$text_color = '';
		} else {
			$classes[] = 'text-color-custom';
			$text_color = ' style="color: '. esc_attr( $text_color ) .'"';
		}
	}

	if( $icon_color != '' ) {
		if( in_array( $icon_color, $presetColors,true ) ) {
			$classes[] = 'icon-color-' . $icon_color;
			$icon_color = '';
		} else {
			$classes[] = 'icon-color-custom';
			$icon_color = 'color: '. $icon_color .';';
		}
	}

	$output = '<span class="'. esc_attr( implode( ' ', $classes ) ) .'"';
	if( $style == 'icon-wrapped' || $style == 'icon-wrapped-top' ) {
		$output .= ' style="' . $background_color . '"';
	}
	$output .= '>';
	if( $link ) {
		$output .= '<a href="'. esc_url( $link ) .'"';
		if( $target ) {
			$output .= ' target="' . esc_attr( $target ) . '"';
		}
		$output .= '>';
	}

	if( $style == 'icon-boxed' || $style == 'icon-boxed-top' ) {
		$icon_color .= $background_color;
	}
	$output .= '<i class="' . esc_attr( themify_icons_get_icon( $icon ) ) . '" style="'. esc_attr( $icon_color ) .'"></i> ';
	if( $text ) {
		$output .= '<span class="icon-text"'. $text_color .'>' . $text . '</span>';
	}
	if( $link ) {
		$output .= '</a>';
	}
	$output .= '</span>';

	return apply_filters( 'themify_icons_output', $output, $atts );
}

Code file location:

themify-icons/themify-icons/includes/shortcode.php

Conclusion

Now that you’ve learned how to embed the Themify Icons Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.