如何根据一些数据动态添加字体真棒图标答案

【问题标题】：How to add font awesome icon dynamically based on some data如何根据一些数据动态添加字体真棒图标
【发布时间】：2017-01-10 02:05:15
【问题描述】：

是否可以根据获取的数据更改/添加字体真棒图标？如果type 是.pdf，则字体真棒将是<i class="fa fa-file-pdf-o">，否则如果type 是.docx，它将是<i class="fa fa-file-word-o"></i>。有人可以给我一些想法吗？我会用什么？ Javascript还是PHP？

这是我的一些代码。

 <div class="col-sm-6 col-md-6">
    <?php
              $sql ="SELECT * FROM lectures WHERE subj_descr = '$subj'";
               $result = mysqli_query($con, $sql);


               while($row = mysqli_fetch_array($result)){
                $file = $row['file'];
                $type = $row['type'];

        ?>

    <a style="display:block; margin-top:5px;" href="uploads/<?php echo $file ?>" target="_blank"><i class="fa fa-file-word-o"></i> <?php echo $file; ?></i></a>

         <?php
          }  
         ?>
    </div>

【问题讨论】：

标签： javascript php fonts

【解决方案1】：

试试这样的：

<?php
if($type = $row['type'] == 'pdf')   // make <i> tag on behalf of condition
{
    echo '<i class="fa fa-file-pdf-o">'. your text here .'</i>';
}
else if($type = $row['type'] == 'txt')
{
    echo '<i class="fa fa-file-word-o">'. your text here .'</i>';
}
?>

【讨论】：

太好了！！享受:)

【解决方案2】：

首先，最佳做法是将演示与逻辑分开。在你的 HTML 中间有一个 mysql 查询不是一个好主意。而是将您的查询放在您的 HTML 之前，然后循环遍历 HTML 中的结果。

在您的 HTML 之前添加这样的内容：

$files = [];
while($row = mysqli_fetch_array($result)){
    $file['filename'] = $row['file'];
    $file['type'] = $row['type'];

    switch($file['type']) {
        case 'pdf':
            $file['fa'] = 'fa-file-pdf-o';
            break;
        case 'docx':
        case 'doc':
            $file['fa'] = 'fa-file-word-o';
            break;
        default:
            throw new Exception('Invalid file type'); // Handle this how you want
    }
    $files[] = $file;
}

然后在你的 HTML 循环中遍历结果：

<div class="col-sm-6 col-md-6">
    <?php
        foreach ($files as $file) {
            ?>
            <a style="display:block; margin-top:5px;" href="uploads/<?php echo $file['filename'] ?>" target="_blank">
                <i class="fa <?php echo $file['fa'];?>"></i> <?php echo $file['filename']; ?></i>
            </a>
            <?php
        }
    ?>
</div>

【讨论】：

【解决方案3】：

您也可以在此处使用开关。

switch(strtolower($row['type'])){
    case 'pdf':
        $icon = "fa-file-pdf-o";
        break;
    default:
        $icon = "fa-file-word-o";
        break;
}

echo "<i class='fa ". $icon ."'>". your text here ."</i>";

注意：您也可以对文本使用变量值。然后它也会进入开关盒。

【讨论】：

【解决方案4】：

你也可以这样做。在 html 中减少代码。

<?php
$row['type']=='pdf'?'pdf':'txt';
?>
<i class="fa fa-file-<?=$row['type']?>-o"></i>;

【讨论】：

【解决方案5】：

将以下功能添加到您的页面。如果您需要添加其他文件类型/图标，您可以在"new_file_type" => "fa-icon-name" 中的数组 $fa 中添加更多元素。只是不要忘记逗号。 Arrays

<?php
    function getFa($type){

        $fa = array(
            "pdf" => "fa-file-pdf-o",
            "docx" => "fa-file-word-o"
            );

        return isset($fa[$type]) ? $fa[$type] : '';
    }
?>

那么在HTML中就可以这样使用了：

<i class="fa <?php echo getFa($type); ?>"></i> <?php echo $file; ?></i>

该函数不是必需的，但它会防止 $type 变量为空或文件类型不包含在数组中的错误。

如果您确定文件类型将始终存在并且在数组中具有关联的元素，也可以只创建一个数组并从您的代码中调用它。

例子：

<?php
    $fa = array(
        "pdf" => "fa-file-pdf-o",
        "docx" => "fa-file-word-o"
        );
?>

在 HTML 中：

<i class="fa <?php echo $fa[$type]; ?>"></i> <?php echo $file; ?></i>

【讨论】：