Font Awesome Pseudo element to Bootstrap card-top-img(img tag)答案

【问题标题】：Font Awesome Pseudo element to Bootstrap card-top-img(img tag)Font Awesome Pseudo element to Bootstrap card-top-img(img tag)
【发布时间】：2018-07-17 17:25:50
【问题描述】：

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

但它只是渲染小空盒子：

我该怎么做？

【问题讨论】：

看起来您没有正确嵌入字体文件以...

标签： css twitter-bootstrap font-awesome pseudo-element

【解决方案1】：

你没有把 font awesome class file

   <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

【讨论】：

这似乎不是一个伪元素。 div.card-head 是我为此做的，而不是引导程序的类。

【解决方案2】：

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

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

【讨论】：

省略，包括布局模板中的链接。 (<script defer src="{% static 'fontawesome-5/fontawesome-all.js' %}"></script>) 我正在使用下载的文件。
查看这个答案：stackoverflow.com/a/48638482/8270343 了解为什么使用 CDN 可以让您的网站/应用程序加载得更快！
即使是另一回事，也有帮助。谢谢！