Using Font Awesome as post thumbnail

Question

I want to use font awesome instead of post thumbnail for some bootstrap cards that are part of my custom wordpress theme. Is this possible or I need to fallback on the post excerpt to obtain the desired result? Another question is about the content, I want to make a single page website so I'm using REST API to get the various custom post type contents, is this choice better than the standard page loading with a custom post type dedicated template? Thanks for the help.

Here is my code:

<?php $services = new WP_Query( ['post_type' => 'services'] ); ?>
<?php if( $services->have_posts() ): while( $services->have_posts() ): $services->the_post(); ?>
  <div class="col-sm-12 col-md-3 col-lg-3">
    <div class="card">
<!-- Instead of the img tag, here I need to load a different font awesome icon for each post-->
      <img class="card-img-top" src="<?php the_post_thumbnail_url(); ?>">
      <hr>
      <a class="btn btn-outline-light" href="#"><?php the_title('<h4>','</h4>'); ?></a>
    </div>
  </div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>

Answer 1

Load the FontAwesome library properly in your theme via wp_enqueue_scripts hook, then instead of using:

<img src="XY" class="card-img-top" alt="...">

use the icons fa fa-whatever in your theme. Sure, you have to do some checks based on category etc.

I'd try something like this:

<?php
// functions.php
function wpse_script_loading(){
    // This can be local or via some cdn, you decide.. https://cdn.fontawesome...
    wp_register_style('fontawesome', get_template_directory_uri() . '/fonts/fontawesome.ttf');
    wp_enqueue_style('fontawesome');
}
add_action('wp_enqueue_scripts', 'wpse_script_loading');

Then, later in your theme template or plugin template, you do:

...
<div class="card">
<?php
// Within the Loop
if(is_category('ID or cat name')){
    // Some Icon
    echo '<i class="fa fa-whatever"></i>';

} else if(is_category(Y)) {
    // Another Icon
    echo '<i class="fa fa-icon"></i>';
} else {
   echo '<i class="fa fa-somefallback"></i>';
}

?>
<hr>
<a class="btn btn-outline-light" href="#"><?php the_title('<h4>','</h4>'); ?></a>
</div>
...

Some explaination: You have to include the font awesome libray, so you can use it. The way you include is up to you.

The function is_category() is a WordPress internal function to check which category "the loop" currently shows. You can check for an integer (a number) or a category name.