用令人敬畏的字体替换图像答案

【问题标题】：Replace images with font awesome用令人敬畏的字体替换图像
【发布时间】：2019-09-10 04:35:28
【问题描述】：

我正在尝试更改用于显示评论图像的代码。前面的代码有 5 个星星的图像。第一张图片有一颗星，接下来是两颗星，以此类推。每个图像的宽度相同，因此对齐始终正确。使用的代码是

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

上面的结果取决于评级，如

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

我的想法是用字体很棒的图标替换图像，以便更容易控制颜色，如果颜色或星星数量需要更改，则需要更少的维护。我这样做了，它工作得很好，但它需要的代码量远远超过图像。所以我的问题是：

我应该坚持使用图片吗？
有没有更好的方法来为图标方法编码？

这里是图标方法的代码：

    <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++;
        }
    }

【问题讨论】：

从标准化和优化的方法来看，使用 Font Awesome，如果广泛使用，特别是对于图标，比一系列不同的图像更有益。因为它是在整个站点中缓存和使用的单个文件下载。想想精灵（包含多个图形的单个图像文件）与必须下载多个图形。但是，如果仅用于星星，则下载一次使用是非常大的资产。至于建议的替换，您可以使用 str_repeat ('<i class="fas fa-star '. $do_hide .'"></i>', $rating) 代替 for 循环。

标签： php replace font-awesome-4

【解决方案1】：

我应该坚持使用图片吗？

没有人会为你回答这个问题。你自己必须决定。坚持任何适合你、你的团队和你的客户的东西。编程中最重要的是沟通（或者至少我是这么认为的）。

我将把fyrye 写在评论中的内容包括在内，这是一个非常好的观点：

从标准化和优化的角度来看，使用Font Awesome，如果广泛使用……比一系列不同的图像更有益……但是如果它只用于星星，它是一个非常大的资产下载一次性使用。

有没有更好的图标方法编码方式？

...它需要的代码量远远超过图像...

你应该更聪明地工作，而不是更努力:)

如果你研究所有可用的 PHP 数组函数，你会发现array_fill。

现在，与array_merge 一起，我们可以创建一个非常优雅且易于维护的代码，在您的提交中看起来比您已经拥有的要好得多:)

看看这个：

$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);

这是var_dump 产生的结果：

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>"
}

看到了吗？我将$rating 设置为3，结果数组有3 个星星图像和2 个隐藏星星图像。

现在，您只需拨打implode 即可将所有元素连接在一起。我相信，你的生产代码最终会是这样的：

$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);

【讨论】：