3

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

2 Answers 2

2

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>
4
  • The icons still do not show. The course_features titles show but the corresponding icons do not show.
    – Gande
    Commented Jul 17, 2018 at 3:22
  • There's nothing invalid about your code if you fix the issue I identified, which means your issue is either 1 or 2 of the points I raised in my answer. Commented Jul 17, 2018 at 3:28
  • the_field could be unidentified
    – admcfajn
    Commented Nov 6, 2020 at 8:34
  • That’s an Advanced Custom Fields function. If you’re not using that plugin you can’t use it. Commented Nov 7, 2020 at 5:17
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.