Change a class in php according the value of a ACF select field

Question

hello thank you so much for the help from the community.

So I have a ACF field named Amenities,(this is a select field type), when on the backend they are selecting the amenities, I would like them to appear on the front end of the website (only those which have been selected). Also each amenities have his own icon, they should be each on one line.

This is my code:

<div>
    <?php
        $amenities = get_field( 'amenities_rest' );
    
            if( $amenities ): ?>
                <div class="amenities-<?php echo esc_attr($amenities['value']); ?>"><?php echo implode( '<br/>', $amenities ); ?></div>
            <?php endif; ?>
 </div>

And a css (for the fontawesome)

.amenities-reservation::before {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 400; 
  content:"\f59f";
  padding-right: 10px;
}

With this code I can show the label on front hand, and each amenities are on one line.

I would like to have different css class as .amenities-reservation:: before{} /.amenities-takeout:: before{} /.amenities-delivery:: before{} etc.. with a different icon. But the class is not working. <div class="amenities-<?php echo esc_attr($amenities['value']); ?>"> , don't know why!!

Any idea?

Answer 1

I found this using a foreach statement and ul>li and so far it's working.

<?php 
$amenities = get_field( 'amenities_rest' ); ?>
<ul class="nodecoration">
       <?php foreach ($amenities as $amenity) : ?>
            <li class="amenities-<?php echo esc_attr($amenity['value']); ?>"><?php echo esc_html($amenity['label']); ?></li>
        <?php endforeach; ?>
 </ul>

But if you have any better way to do, please share as well. Thank you