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

Question

I'd like to put a Font Awesome font to the upper image section of bootstrap card component, card-img-top.

Following similar with the official guide and some solution, it didn't work:

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

But it just render small empty box:

How can I work this?

That rather looks like you did not properly embed the font file to begin with ... — CBroe, Feb 07 '18 at 12:15
Here is a perfect solution that uses `card-block`: https://www.codeply.com/go/T0SPcWuyBL/bootstrap-4-row-of-cards-with-icons — L.Lauenburg, May 20 '22 at 13:16

score 0 · Answer 1 · answered Feb 07 '18 at 12:18

0

You need to include the following link in your head section:

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

Or, if you are using Font Awesome version 5, you need to include this in the head section of your HTML document:

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

answered Feb 07 '18 at 12:18

WebDevBooster

14,674
9
66
70

Omitted including link in the layout template. (``) I'm using a dowloaded file. – 홍한석 Feb 07 '18 at 14:27
Check out this answer: https://stackoverflow.com/a/48638482/8270343 to see why using CDNs can make your websites/apps load much faster! – WebDevBooster Feb 07 '18 at 14:47
Even it is another matter, a helpful thing. Thanks! – 홍한석 Feb 07 '18 at 15:41

score 0 · Answer 2 · answered Feb 07 '18 at 12:18

0

You not put font awesome class file

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

try this

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

and you need to put in your header

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

try to read guidance https://fontawesome.com/get-started/web-fonts-with-css

answered Feb 07 '18 at 12:18

core114

5,155
16
92
189

1

It seemed not a pseudo element. `div.card-head` is I made for that, not the bootstrap's class. – 홍한석 Feb 07 '18 at 14:31

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

2 Answers2