WP_Query to loop a Custom Field, Custom Post Types do not show

Question

I am using WP_Query to loop a Custom Field, Custom Post Type that shows 6 Menu Icons across 6 horizontal fields. The icons do not show on the page.

My query code is:

<?php $loop = new WP_Query( array( 'post_type' => 'course_feature', 'orderby', => 'post_id', 'order' => 'ASC')); ?>

code to show loop:

<?php while( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="col-sm-2">
<i class=<?php the_field('course_feature_icon'); ?>"</i>
</div>

<?php endwhile; ?> 

Answer 1

There's a missing opening quote and closing bracket on this line:

<i class=<?php the_field('course_feature_icon'); ?>"</i>

Needs to be:

<i class="<?php the_field('course_feature_icon'); ?>"></i>

That's all that's wrong with your code. It should then work assuming:

1. You have a custom field, course_feature_icon, whose value is a valid CSS class.
2. You have the necessary CSS to add an icon based on that class.

One last suggestion though. For safety you should escape the field value before outputting it as a class:

<i class="<?php echo esc_attr( get_field('course_feature_icon') ); ?>"></i>

Answer 2

The icons still do not show. The course_features titles that appear beneath each icon shows, but the icons do not show.

So, I have 6 columns of text, but the icons do not appear above the text. Not sure what to do … I tried the suggested edits. The icons do not show.

I have them as a custom field group: course_feature_icon, field type: Radio button, choices: .ci ci-computer, and 5 additional names. (css icon sprite name).