I would like to use svg icons as radio buttons and have been successful using this technique from her: https://support.advancedcustomfields.com/forums/topic/radio-button-image-label/, but this seems to not work anymore. Maybe there has been added some kind of security/wp_kses filter? Has anyone been able to solve this recently?
I use the technique in the link and it’s still working here. Maybe post a code snippet
Thanks for answering @floatingpoint . The snippet is the same as in the post I referenced, however, the difference is that I use inline SVG instead. Like I said, this worked fine until recently. So I am guessing that some security has been added to filter away inline SVG scripts.
Here is a snippet of my code:
add_filter( 'acf/load_field/name=alert_icon_dk', 'alert_banner_icons' );
function alert_banner_icons( $field ) {
$field['choices'] = array(
'alert_icon_exclamation' => '<span class="alert-banner-svg-icon" style="width: 20px;height: auto;vertical-align: middle;display:inline-block;"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1s-20.4 20.1-34.7 20.1h-432c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368c7.2-12.3 20.3-19.8 34.5-19.8zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24v-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" /></svg></span>',
);
return $field;
}
Here is the equivalent HTML, where the SVG part is removed:
<ul class="acf-radio-list acf-hl" data-allow_null="0" data-other_choice="0">
<li>
<label>
<input type="radio" id="acf-field_651292a9427d5-alert_icon_exclamation" name="acf[field_651292a9427d5]" value="alert_icon_exclamation">
<span class="alert-banner-svg-icon" style="width: 20px;height: auto;vertical-align: middle"></span>
</label>
</li>
</ul>
When I insert that HTML code into Choices input field, when editing the Radio Button field, the SVG html is not there after saving. So something must happen when saving/updating the field.
