Font Awesome Pseudo element to Bootstrap card-top-img（img tag）

Question

我想将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>
          ...

但它只是渲染小空框：

我该怎么做？

Answer 1

你没有把字体真棒 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

Answer 2

您需要在头部包含以下链接：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

或者，如果您使用的是Font Awesome版本5，则需要将其包含在HTML文档的head部分中：

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>