How to Fix Broken Font Awesome Icons in RSS Feeds

I noticed that when using Font Awesome for book ratings, the ratings do not show up on the RSS feed. Is there a way to show the ratings on the RSS feed, either as stars or even numerically?
Fahima

Hi Fahima!

The reason this happens is because Font Awesome icons are a font. The font file is included on your website, but it’s not included in the RSS feed. So when you view a Font Awesome icon without the font being loaded, it doesn’t show up.

The easiest way to fix this is to use a custom-coded shortcode for displaying your star icons. This shortcode branches off in two ways:

1. If it’s being shown in an RSS feed, then it prints out normal HTML style stars that don’t require a font.
2. If it’s being shown in your post, then it prints out the Font Awesome stars.

The code I’m going to show you doesn’t include Font Awesome on your own, so it requires that you’re already including Font Awesome in your theme or another plugin.

Let’s check it out!

Your custom shortcode

/**
 * Adds the shortcode for inserting Font Awesome icons.
 * 
 * Accepts one parameter called 'rating', which must be a number.
 * 
 * Accepts a second paramter called 'maximum', which must also be a number.
 * Maximum will "fill up" the rating with empty stars until it reaches
 * the maximum value you entered.
 *
 * Sample Usage: [fa-rating number="4.5"]
 *
 * @param array $atts
 *
 * @return string
 */
function ng_fa_star_ratings( $atts ) {
	extract( shortcode_atts( array(
		'number'  => 5,
		'maximum' => null
	), $atts ) );

	// Not a valid number - bail.
	if ( ! is_numeric( $number ) ) {
		return '<p>' . __( 'Error: Please enter a valid number in the rating paramter.' ) . '</p>';
	}

	$output = '';

	// Get the rating as an integer.
	$rating_int = (int) $number;
	// Whether or not the original rating is a fraction.
	$is_fraction = ( $rating_int != $number ) ? true : false;

	/*
	 * If it's a fraction and we're in an RSS feed and we've set a maximum
	 * then display a plain text star. This is because the HTML half stars
	 * don't work so good!
	 */
	if ( $is_fraction === true && ! empty( $maximum ) && is_feed() ) {
		return sprintf( __( '%s Stars' ), $number );
	}

	// Get the correct star format, depending on whether we're in an RSS feed or not.
	$full_star  = is_feed() ? '&#9733;' : '<i class="fa fa-star"></i>';
	$half_star  = is_feed() ? '&frac12;' : '<i class="fa fa-star-half-o"></i>';
	$empty_star = is_feed() ? '&#9734;' : '<i class="fa fa-star-o"></i>';

	// Add one star for each rating.
	for ( $i = 0; $i < $rating_int; $i ++ ) {
		$output .= $full_star;
	}

	// If this is a fraction, add a half star at the end.
	if ( $is_fraction === true ) {
		$output .= $half_star;
	}

	// If $maximum is filled out, let's fill it up with empty stars.
	if ( ! empty( $maximum ) && $maximum > $rating_int ) {
		$stars_needed = (int) $maximum - $number;
		if ( $stars_needed > 1 ) {
			for ( $j = $stars_needed; $j >= 1; $j -- ) {
				$output .= $empty_star;
			}
		}
	}

	return $output;
}

add_shortcode( 'fa-rating', 'ng_fa_star_ratings' );

I’ve commented the code pretty well if you want to read through it and figure out what’s going on. Once you’ve got the code on your site, you’ll have access to this shortcode: [fa-rating number="4.5"] Just put whatever number you want inside the quotes and that’s it!

That will show the exact number of stars you entered. But if you want to “fill up” the rest with empty stars, you can do that too! By that I mean, if you enter 3 stars you can show 3 filled in stars and 2 “empty” stars to signify 3/5. To do that, you just modify the shortcode slightly: [fa-rating number="3" maximum="5"]

Download the free plugin

You can either copy and paste the above code into your theme’s functions.php file, or you can download the file and install it as a plugin:

Do you use Font Awesome?

If so, did you ever notice that your icons were broken in RSS feeds?