Below, you’ll find a detailed guide on how to add the WP Font Awesome Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the WP Font Awesome Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the WP Font Awesome Plugin and the shortcodes it provides:
"WP Font Awesome is a versatile WordPress plugin that integrates the powerful Font Awesome library, allowing users to easily customize and enhance their website's typography for a unique aesthetic."
- [wpfa]
- [wpfa5s]
- [wpfa5r]
- [wpfa5b]
WP Font Awesome [wpfa] Shortcode
The WP-Font-Awesome plugin shortcode allows users to customize icons on their WordPress site. It offers options to modify the icon’s size, color, and placement. Shortcode Name: WP-Font-Awesome
Shortcode: [wpfa]
Parameters
Here is a list of all possible wpfa shortcode parameters and attributes:
icon– selects the Font Awesome icon to displaysize– adjusts the size of the Font Awesome iconcolor– changes the color of the Font Awesome iconsup– when set to ‘yes’, displays the icon in superscript
Examples and Usage
Basic example – A simple usage of the wpfa shortcode to display the ‘home’ icon.
[wpfa icon="home" /]Advanced examples
Displaying a ‘user’ icon with a large size. The size parameter can be used to adjust the icon’s size, and in this case, we will set it to ‘lg’ for large.
[wpfa icon="user" size="lg" /]Displaying a ‘camera’ icon with a custom color. The color parameter can be used to change the icon’s color. Here, we are setting it to red.
[wpfa icon="camera" color="#ff0000" /]Displaying a ‘bell’ icon with a superscript. The ‘sup’ parameter can be used to add a superscript to the icon. In this example, we are setting it to ‘yes’ to display the bell icon as a superscript.
[wpfa icon="bell" sup="yes" /]Using multiple parameters to display a ‘star’ icon with a large size, in blue color, and as a superscript. This example showcases how you can use multiple parameters together to customize the icon’s display.
[wpfa icon="star" size="lg" color="#0000ff" sup="yes" /]PHP Function Code
In case you have difficulties debugging what causing issues with [wpfa] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wpfa', 'wp_fa_shortcode' );Shortcode PHP function:
function wp_fa_shortcode( $atts ) {
extract( shortcode_atts( array( 'icon' => 'home', 'size' => '', 'color' => '', 'sup' => ''), $atts ) );
if ( $size ) { $size = esc_attr(' fa-'.$size); } else{ $size = ''; }
if ( $color ) { $color = ' style="color: '.esc_attr($color) ; } else{ $color = esc_attr(''); }
if ( strtolower($sup) === 'yes' ) {
return '<sup><i class="fa fa-'.str_replace('fa-','',$icon). $size. '"'.$color .'"></i></sup>';
} else{
return '<i class="fa fa-'.str_replace('fa-','',$icon). $size. '"'.$color .'"></i>';
}
}
Code file location:
wp-font-awesome/wp-font-awesome/wp-font-awesome.phpWP Font Awesome [wpfa5s] Shortcode
The WP-Font-Awesome plugin shortcode ‘wpfa5s’ allows you to display icons on your WordPress site. It takes parameters for the icon name, size, color, and whether it should be superscript.
Shortcode: [wpfa5s]
Parameters
Here is a list of all possible wpfa5s shortcode parameters and attributes:
icon– Specifies the Font Awesome icon to be displayedsize– Defines the size of the icon, empty for default sizecolor– Sets the color of the icon, empty for default colorsup– If set to ‘yes’, the icon appears as superscript
Examples and Usage
Basic example – The shortcode displays a home icon by default if no parameters are specified.
[wpfa5s /]Advanced examples
Displaying a specific icon by specifying the ‘icon’ parameter. For instance, to display a user icon, the shortcode would be:
[wpfa5s icon="user" /]Adjusting the size of the icon by specifying the ‘size’ parameter. To display a large user icon, the shortcode would be:
[wpfa5s icon="user" size="lg" /]Changing the color of the icon by specifying the ‘color’ parameter. To display a red user icon, the shortcode would be:
[wpfa5s icon="user" color="#ff0000" /]Showing the icon as superscript by setting the ‘sup’ parameter to ‘yes’. To display a superscript user icon, the shortcode would be:
[wpfa5s icon="user" sup="yes" /]Combining multiple parameters to display a large, red user icon as superscript, the shortcode would be:
[wpfa5s icon="user" size="lg" color="#ff0000" sup="yes" /]PHP Function Code
In case you have difficulties debugging what causing issues with [wpfa5s] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wpfa5s', 'wp_fa5s_shortcode' );Shortcode PHP function:
function wp_fa5s_shortcode( $atts ) {
extract( shortcode_atts( array( 'icon' => 'home', 'size' => '', 'color' => '', 'sup' => '' ), $atts ) );
if ( $size ) { $size = esc_attr(' fa-'.$size); }
else{ $size = ''; }
if ( $color ) { $color = ' style="color: '.esc_attr($color) ; }
else{ $color = ''; }
if ( strtolower($sup) === 'yes' ) {
return '<sup><i class="fas fa-'.str_replace('fa-','',$icon). $size. '"'.$color .'"></i></sup>';
} else{
return '<i class="fas fa-'.str_replace('fa-','',$icon). $size. '"'.$color .'"></i>';
}
}
Code file location:
wp-font-awesome/wp-font-awesome/wp-font-awesome.phpWP Font Awesome [wpfa5r] Shortcode
The WP-Font-Awesome plugin shortcode ‘wpfa5r’ is used to customize the display of icons on your WordPress site. This shortcode allows you to specify the icon, size, color, and whether the icon is superscript. If no size or color is specified, it defaults to the original settings. The ‘sup’ attribute, when set to ‘yes’, wraps the icon in a tag, making it superscript.
Shortcode: [wpfa5r]
Parameters
Here is a list of all possible wpfa5r shortcode parameters and attributes:
icon– Specifies the icon to be displayedsize– Determines the size of the iconcolor– Defines the color of the iconsup– If set to ‘yes’, the icon will be displayed as superscript
Examples and Usage
Basic example – A shortcode to display a home icon using the default parameters.
[wpfa5r icon="home" /]Advanced examples
Displaying a user icon in large size with a specific color.
[wpfa5r icon="user" size="lg" color="#008000" /]Displaying a star icon in small size, colored red, and superscripted.
[wpfa5r icon="star" size="sm" color="#FF0000" sup="yes" /]Displaying a bell icon in default size, colored blue, and not superscripted.
[wpfa5r icon="bell" color="#0000FF" sup="no" /]Please note that you can use any FontAwesome icon by replacing the ‘icon’ attribute value. Also, the ‘size’ attribute accepts ‘lg’ for large, ‘sm’ for small, and ‘xs’ for extra small. The ‘color’ attribute accepts any valid color code. The ‘sup’ attribute accepts ‘yes’ to display the icon as superscript and ‘no’ for normal display.
PHP Function Code
In case you have difficulties debugging what causing issues with [wpfa5r] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wpfa5r', 'wp_fa5r_shortcode' );Shortcode PHP function:
function wp_fa5r_shortcode( $atts ) {
extract( shortcode_atts( array( 'icon' => 'home', 'size' => '', 'color' => '', 'sup' => '' ), $atts ) );
if ( $size ) { $size = esc_attr(' fa-'.$size); }
else{ $size = ''; }
if ( $color ) { $color = ' style="color: '.esc_attr($color) ; }
else{ $color = ''; }
if ( strtolower($sup) === 'yes' ) {
return '<sup><i class="far fa-'.str_replace('fa-','',$icon). $size. '"'.$color .'"></i></sup>';
} else{
return '<i class="far fa-'.str_replace('fa-','',$icon). $size. '"'.$color .'"></i>';
}
}
Code file location:
wp-font-awesome/wp-font-awesome/wp-font-awesome.phpWP Font Awesome [wpfa5b] Shortcode
The WP-Font-Awesome plugin shortcode ‘wpfa5b’ is used to display a specific Font Awesome icon on your WordPress site. This shortcode allows customization of the icon’s size, color, and whether it should be superscripted. The ‘icon’ attribute specifies the icon to display, ‘size’ adjusts its size, ‘color’ changes the icon color, and ‘sup’ controls superscripting.
Shortcode: [wpfa5b]
Parameters
Here is a list of all possible wpfa5b shortcode parameters and attributes:
icon– defines the specific icon to be displayedsize– adjusts the size of the icon, empty for default sizecolor– changes the color of the icon, empty for default colorsup– if set to ‘yes’, the icon is displayed as superscript
Examples and Usage
Basic example – A simple usage of the shortcode to display a home icon.
[wpfa5b icon="home" /]Advanced examples
Using the shortcode to display a large-sized ‘home’ icon in red color.
[wpfa5b icon="home" size="lg" color="red" /]Applying the shortcode to display a ‘camera’ icon with a superscript, in a default size and color.
[wpfa5b icon="camera" sup="yes" /]Displaying a ‘bell’ icon in blue color with a small size, without a superscript.
[wpfa5b icon="bell" size="sm" color="blue" /]Using the shortcode to display a ‘book’ icon in green color with a large size, with a superscript.
[wpfa5b icon="book" size="lg" color="green" sup="yes" /]PHP Function Code
In case you have difficulties debugging what causing issues with [wpfa5b] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wpfa5b', 'wp_fa5b_shortcode' );Shortcode PHP function:
function wp_fa5b_shortcode( $atts ) {
extract( shortcode_atts( array( 'icon' => 'home', 'size' => '', 'color' => '', 'sup' => '' ), $atts ) );
if ( $size ) { $size = esc_attr(' fa-'.$size); }
else{ $size = ''; }
if ( $color ) { $color = ' style="color: '.esc_attr($color) ; }
else{ $color = ''; }
if ( strtolower($sup) === 'yes' ) {
return '<sup><i class="fab fa-'.str_replace('fa-','',$icon). $size. '"'.$color .'"></i></sup>';
} else{
return '<i class="fab fa-'.str_replace('fa-','',$icon). $size. '"'.$color .'"></i>';
}
}
Code file location:
wp-font-awesome/wp-font-awesome/wp-font-awesome.phpConclusion
Now that you’ve learned how to embed the WP Font Awesome Plugin shortcodes, 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.
Leave a Reply