Using Font Awesome as post thumbnail

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

<img src="https://wordpress.stackexchange.com/questions/353224/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.

Related Posts: