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(); ?>

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(); ?>

• php
• plugin-development
• theme-development

• I don't understant what you want to do with the font awesome. edit your question to add an example. – Kaperto Commented Nov 24, 2019 at 16:31
• I think the question is clear, I want to use the font awesome icons instead of the post thumbnail image. – sialfa Commented Nov 24, 2019 at 16:35
• I don't understand. Where de you have the FA icons? (Maybe you want to upload manually the FA icon in the post thumbnail?....) – Adriana Hernández Commented Nov 24, 2019 at 19:32
• If I had the icon I didn't ask on how to use it instead of the post thumbnail. this is possible in css by using the relative code of every icon or into the html by adding the relative class to an <i> tag. What I want to do is to filter the post thumbnail function to display the font awesome markup based on the post content, nor upload an image. – sialfa Commented Nov 24, 2019 at 19:50

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