Replace images with font awesome

Question

I'm trying to change the code for displaying images for reviews. The previous code has 5 images of stars. The first image has one star, the next two and so on. The width of each image is the same so the alignment is always correct. The code that was used is

    $p_stars = '<img src="images/stars_' . $rating . '.png">';

The above results in a string of stars depending on the rating, like

 ****
 *****
 *
 ***

My thought was to replace the images with font-awesome icons to make it easier to control the color, which requires less maintenance should the color or number of stars need changing. I did this and it works fine but the amount of code it takes is far more than with the images. So my questions are:

• Should I stick with the images?
• Is there a better way to code for the icon method?

Here's the code for the icon method:

    <style>
    .stars {color:#FB9802;}
    .stars-hide {color:#fff;}
    </style>

    $p_stars  = '';
    $p = 0;
    while ($p < 5) {
        for ($x = 0; $x < $rating; ++$x) {
            $p_stars .= '<i class="fas fa-star stars"></i>';
            $p++;
        }
        if ($p == 5) break;

        for ($x = $p; $x < 5; ++$x) {
            $p_stars .= '<i class="fas fa-star stars-hide"></i>';
            $p++;
        }
    }

Answer 1

Should I stick with the images?

No one will answer this question for you. You yourself have to decide. Stick with whatever suits you, your team and your client. The most important thing in programming is communication (or at least that's what I believe).

I'm going to include what fyrye wrote in the comment, it's a very good point:

From a standardization and optimization approach, using Font Awesome, if used extensively... is more beneficial than a series of different images... However if it is only used for the stars, it is a very large asset to download for one single use.

---

Is there a better way to code for the icon method?

... the amount of code it takes is far more than with the images...

You should work smarter, not harder :)

If you research all available PHP array functions, you will come across array_fill.

Now, together with array_merge we can create a very elegant and easy-to-maintain piece of code, which would look far better in your commit than what you already have :)

Take a look at this:

$imageShow = '<i class="fas fa-star stars"></i>';
$imageHide = '<i class="fas fa-star stars-hide"></i>';

$rating = 3;

$stars = array_merge(
    array_fill(0, $rating, $imageShow),
    array_fill($rating, 5-$rating, $imageHide)
    );
    
var_dump($stars);

This is what var_dump yields:

array(5) {
  [0]=>
  string(33) "<i class="fas fa-star stars"></i>"
  [1]=>
  string(33) "<i class="fas fa-star stars"></i>"
  [2]=>
  string(33) "<i class="fas fa-star stars"></i>"
  [3]=>
  string(38) "<i class="fas fa-star stars-hide"></i>"
  [4]=>
  string(38) "<i class="fas fa-star stars-hide"></i>"
}

See? I set $rating to be 3 and the result array has 3 images of stars and 2 of hidden stars.

Now, all you need is an implode call to join all the elements together. I believe, your production code would in the end look like this:

$imageShow = '<i class="fas fa-star stars"></i>';
$imageHide = '<i class="fas fa-star stars-hide"></i>';

$stars = array_merge(
    array_fill(0, $rating, $imageShow),
    array_fill($rating, 5-$rating, $imageHide)
    );

$p_stars = implode("", $stars);