How to Fix Broken Font Awesome Icons in RSS Feeds

How to fix broken Font Awesome icons in RSS feeds. A simple shortcode to use in WordPress!
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?

Photo of Ashley
I'm a 27 year old California girl living in England (I fell in love with a Brit!). I like to inject a little #girlpower into the WordPress development community by teaching women how to be coding badasses. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

Leave a Reply

(Enter your URL then click here to include a link to one of your blog posts.)

This site uses Akismet to reduce spam. Learn how your comment data is processed.

8 comments

    1. Sadly this code doesn’t work on Blogger. 🙁 It uses a language called PHP, which isn’t allowed on Blogger.

    1. Hi Rosa!

      This is something you’ll have to take up with Shareaholic. Most likely, the related posts they create for you are cached. That means they pick a few related posts, then SAVE those results. So if you delete a post, Shareaholic doesn’t know it’s been deleted, so it keeps showing the same posts it already saved earlier. Does that make sense?

      You’ll probably have to contact Shareaholic to find out how to clear the cache (force it to pick new related posts) or find out how long it takes for the cache to clear itself.

Recent Posts

    Random Posts