Better Font Awesome Shortcode

Below, you’ll find a detailed guide on how to add the Better Font Awesome 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 Better Font Awesome Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Better Font Awesome Plugin and the shortcodes it provides:

Better Font Awesome

"Better Font Awesome is a dynamic WordPress plugin that lets you integrate and customize Font Awesome icons seamlessly. Enhance your website aesthetics with ease using this plugin."

★★★★✩ (84) Active Installs: 100000+ Tested with: 6.1.4 PHP Version: false

Included Shortcodes:

• [icon]

Better Font Awesome [icon] Shortcode

The Better Font Awesome plugin shortcode allows users to add custom icons to their WordPress site. It provides flexibility in terms of icon size, style, and spacing. This shortcode extracts an array of attributes including name, class, title, size, space, and style. It then sanitizes the name and generates a class array. The class string is filtered and applied to the icon. The default icon tag is also filtered. Finally, it generates the HTML icon element output and filters the icon output. The shortcode is designed for compatibility and easy customization.

Shortcode: [icon]

Parameters

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

• name – specifies the name of the icon to be displayed
• class – adds additional CSS classes to the icon
• unprefixed_class – adds CSS classes without prefix to the icon
• title – sets the title attribute for the icon
• size – defines the size of the icon
• space – determines whether to add a space after the icon
• style – applies a specific style category to the icon

Examples and Usage

Basic example – Here we use the shortcode to display a basic icon without any additional classes or attributes.

[icon name='coffee' /]

Advanced examples

Using the shortcode to display an icon with a custom class. This can be useful for applying additional styles to the icon through CSS.

[icon name='coffee' class='my-custom-class' /]

Using the shortcode to display an icon with a title attribute. This can be useful for providing additional information about the icon when a user hovers over it.

[icon name='coffee' title='Coffee Icon' /]

Using the shortcode to display an icon with a specific size. This can be useful for controlling the size of the icon directly within the shortcode, without needing to modify any CSS.

[icon name='coffee' size='2x' /]

Using the shortcode to display an icon with a space after it. This can be useful for adding a space after the icon, which can help with readability when the icon is displayed next to text.

[icon name='coffee' space='true' /]

Using the shortcode to display an icon with a style category. This can be useful for applying a specific style to the icon, such as ‘solid’, ‘brands’, or ‘regular’.

[icon name='coffee' style='solid' /]

PHP Function Code

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

Shortcode line:

add_shortcode( 'icon', array( $this, 'render_shortcode' ) );

Shortcode PHP function:

function render_shortcode( $atts ) {

		extract( shortcode_atts( array(
			'name'             => '',
			'class'            => '',
			'unprefixed_class' => '',
			'title'            => '', /* For compatibility with other plugins */
			'size'             => '', /* For compatibility with other plugins */
			'space'            => '',
			'style'            => '', /* Style category */
		), $atts ));

		$prefix = $this->get_prefix();
		$classes = [];

		/**
		 * Include for backwards compatibility with Font Awesome More Icons plugin.
		 *
		 * @see https://wordpress.org/plugins/font-awesome-more-icons/
		 */
		$title = $title ? 'title="' . esc_attr( $title ) . '" ' : '';
		$space = 'true' == $space ? ' ' : '';
		$size = $size ? ' '. $prefix . '-' . $size : '';

		// Santize name.
		$name = $this->sanitize_shortcode_name_att( $name );

		// Generate classes array.
		$classes[] = $this->get_icon_base_class( $name, $style );
		$classes[] = $this->sanitize_shortcode_class_att( $class );
		$classes[] = $unprefixed_class;

		$class_string = implode( ' ', array_filter( $classes ) );

		/**
		 * Filter the icon class.
		 *
		 * @since  1.0.0
		 *
		 * @param  string  $class_string  Classes attached to the icon.
		 */
		$class_string = apply_filters( 'bfa_icon_class', $class_string, $name );

		/**
		 * Filter the default <i> icon tag.
		 *
		 * @since  1.5.0
		 *
		 * @param  string  Tag to use for output icons (default = 'i').
		 */
		$tag = apply_filters( 'bfa_icon_tag', 'i' );

		// Generate the HTML <i> icon element output.
		$output = sprintf( '<%s class="%s %s" %s>%s</%s>',
			$tag,
			esc_attr( $class_string ),
			esc_attr( $size ),
			// The esc_attr() call for $title happens earlier because we actually want to conditionally output the full title="" string only if there's a value to output.
			$title,
			$space,
			$tag
		);

		/**
		 * Filter the icon output.
		 *
		 * @since  1.0.0
		 *
		 * @param  string  $output  Icon output.
		 */
		return apply_filters( 'bfa_icon', $output );

	}

Code file location:

better-font-awesome/better-font-awesome/vendor/mickey-kay/better-font-awesome-library/better-font-awesome-library.php

Conclusion

Now that you’ve learned how to embed the Better Font Awesome 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.