Question

我想在未设置图片时显示来自- Font awesome-的虚拟图像。您可以看到我的代码显示图像（如果有），但是如果没有，则需要从awesomefont设置虚拟图片。尝试在其他地方粘贴此<i class="fas fa-user-circle"></i>，但这不起作用。有人可以帮帮我吗？

   <?php
      $onderrwerp = $app->get_onderwerpen();
      foreach($onderrwerp as $onderwerp){
        echo '<div class="well well-sm">';
            if(file_exists('assets/images/profielfotos/'.$onderwerp['klant_id'])) { 
                echo '<img class="img-circle" src="/assets/images/profielfotos/'.$onderwerp['klant_id'].'/'.$onderwerp['foto'].'" />';
            } else {
            }
            echo '<b><a href="https://tom.lbmedia.nl/reactie"> '.$onderwerp['onderwerpnaam'].'</b></a>'; 
            echo ' - ' . $onderwerp['voornaam'] . ' ' . $onderwerp['achternaam'];
            echo '</div>';
        }
    ?>

更新这对我有用！我用font-size改了一下。我唯一的问题是它没有很好地对齐。正如你在图片上看到的那样，第一张图片旁边的文字很好但是第二张和3张有点但是更低？如何解决这个问题？

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
   <?php

      $onderrwerp = $app->get_onderwerpen();
      foreach($onderrwerp as $onderwerp){
        echo '<div class="well well-sm">';
            if(file_exists('assets/images/profielfotos/'.$onderwerp['klant_id'])) { 
                echo '<img class="img-circle" src="/assets/images/profielfotos/'.$onderwerp['klant_id'].'/'.$onderwerp['foto'].'" />';
            } else {
                echo '<i style="font-size: 2.5em;" class="fas fa-user-circle"></i>';
            }
            echo '<b><a href="https://tom.lbmedia.nl/reactie"> '.$onderwerp['onderwerpnaam'].'</b></a>'; 
            echo ' - ' . $onderwerp['voornaam'] . ' ' . $onderwerp['achternaam'];
            echo '</div>';
        }
    ?>

how it looks like now

Answer 1

您可能缺少必需的js文件，这就是它没有显示的原因。

Getting Started

<强>尝试：

   Potreiro Code number word
1        7A    5      5 <NA>
2        7A    2      2 <NA>
3        7A   ad          ad
4        7A    4      4 <NA>
5        7A    3      3 <NA>
6        7B    5      5 <NA>
7        7A  70%     70 <NA>
8        7B  50%     50 <NA>
9        7A   ad          ad
10       7B   ac          ac

Answer 2

您可以将字体图标放在其他部分，它应该可以正常工作。我认为您的if语句不允许您转到其他地方。只需像这样更新if条件：

$foto = '/assets/images/profielfotos/'.$onderwerp['klant_id'].'/'.$onderwerp['foto'].' 'images/userphoto/1/2/2/59874a886a0356abc1_thumb9.jpg';
if(file_exists($foto)) {
    echo '<img class="img-circle" src="'.$foto.'" />';
}
else{
 echo '<i class="fas fa-user-circle"></i>'
}

对于你的第二个问题：您可以编写CSS类并在父级中使用它，在您的情况下它将是<div class="well align-children">：

.align-children{
   line-height: 40px; /* depending on the size of your icon */
   display: inline-block;
   vertical-align: middle;
}

您可以在html文档上使用样式：

<style>
.align-children{
   line-height: 40px; /* depending on the size of your icon */
   display: inline-block;
   vertical-align: middle;
} 
</style>

显示虚拟pic如果图片不可用

2 个答案: