How to add font awesome icon dynamically based on some data

Question

Is it possible to change/add a font awesome icon based on the fetched data? If the type is .pdf the font awesome will be <i class="fa fa-file-pdf-o"> else if type is .docx it will be <i class="fa fa-file-word-o"></i> . Can someone give me ideas how to do it? What will i use? Javascript or PHP?

here's some of my code.

 <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

Try something like this:

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

First of all, best practice is to separate your presentation from your logic. Having a mysql query right smack in the middle of your HTML is not a good idea. Instead put your query before your HTML and loop over the results in the HTML.

Put something like this before your 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;
}

Then within your HTML loop over the result:

<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

You can also use a switch here.

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

Note: You can use a variable value to your text as well. Which will then also go inside the switch case.

Answer 4

you can also do like this.put less code in html.

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

Answer 5

Add the following function to your page. If you need to add additional file types/icons you can add more elements to the array $fa in "new_file_type" => "fa-icon-name" . Just don't forget the commas . Arrays

<?php
    function getFa($type){

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

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

Then in the HTML it can be used like this:

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

The function is not necessary but it'll prevent errors in case the $type variable is empty or the file type is not contained in the array.

It is also possible to just create an array and call it from your code if you're certain that the file type will always exist and it will have an element associated in the array.

Example:

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

In HTML:

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