如何基於一些數據動態添加字體真棒圖標

Question

是否可以根據獲取的數據更改/添加字體超贊圖標？ 如果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>

Answer 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>';
}
?>

Answer 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>

Answer 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>";

注意：您也可以在文本中使用變量值。 然后它們也將進入開關盒內部。

Answer 4

您也可以像this.put那樣減少html中的代碼。

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

Answer 5

在頁面上添加以下功能。 如果需要添加其他文件類型/圖標，則可以在"new_file_type" => "fa-icon-name"向數組$ fa添加更多元素。 只是不要忘記逗號。 數組

<?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>