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 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. 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

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 Ashley,
    I love your blogging tips and you really seems to know a lot about wordpress. So I was wondering if you know how to stop deleted posts from showing up on related posts. I have shareaholic for wordpress plugin for related posts and some posts I deleted right after starting the blog keep showing up.
    Thanks!

    Rosa @ Cat Lady Confidential recently posted: 6 Cat Scarves for the Stylish Cat Lady
    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