[英]How to add font awesome icon dynamically based on some data
是否可以根据获取的数据更改/添加字体超赞图标? 如果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>
尝试这样的事情:
<?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>';
}
?>
首先,最佳实践是将您的演示文稿与逻辑分开。 在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>
您也可以在此处使用开关。
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>";
注意:您也可以在文本中使用变量值。 然后它们也将进入开关盒内部。
您也可以像this.put那样减少html中的代码。
<?php
$row['type']=='pdf'?'pdf':'txt';
?>
<i class="fa fa-file-<?=$row['type']?>-o"></i>;
在页面上添加以下功能。 如果需要添加其他文件类型/图标,则可以在"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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.