How to Add Icons to Custom Attributes?

To add custom icons to your custom attributes of your room please start with your page like described below (2 step);

then go to your dashboard and Add a New page;

  • Switch to WPBakery Backend Editor Mode
  • Add an Title With Icon Shortcode/Component
  • Follow the guide below (4 step)

as we get the custom attribute’s CSS class name like Screenshot #1 Step #1 like “mphb-room-type-rooms” we can write a custom CSS like below;

.mphb-loop-room-type-attributes li.mphb-room-type-rooms:before,
.mphb-single-room-type-attributes li.mphb-room-type-rooms:before {
    /*see next step*/
}

next we need the attribute values from Screenshot #2 Step #3 and Step #4 to complete the CSS like below;

.mphb-loop-room-type-attributes li.mphb-room-type-rooms:before,
.mphb-single-room-type-attributes li.mphb-room-type-rooms:before {
    font-family: sunway2;
    content: "\f112";
}

then add your custom CSS to Appearance > Customize > Additional CSS field.