css - Bootstrap的Font Awesome Pseudo元素card-top-img(img标签)

我想将a Font Awesome font放在引导卡组件card-img-top的上部图像部分。

遵循与the official guide和some solution类似的方法，它不起作用：

// card-img.css
<script>
  FontAwesomeConfig = { searchPseudoElements: true };
</script>

.card-top-img {
  display: none;
}

.card-head::after {
  font-family: "Font Awesome 5 Solid";
  content: "\f15c";
}

    <!-- list.html (I'm do in Django project) -->
    <div class="row">
      {% for resume in resume_list %}
      <div class="col-md-4">
        <div class="card mb-4 box-shadow">
          <!-- add for pseudo element -->
          <div class="card-head">
            <img class="card-img-top" src="" alt="">
          </div>
          <div class="card-body text-center">
            <h5 class="card-title text-success">
          </div>
          ...

但它只是呈现一个小的空框：



我该如何工作？

最佳答案

您没有将字体很棒的class文件放入

   <i class="fas fa-file-alt"></i>

尝试这个

<div class="card-head">
         <i class="fas fa-file-alt"></i>
          </div>

你需要把标题放进去

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

尝试阅读指南https://fontawesome.com/get-started/web-fonts-with-css