“Icon” control type

[pagelab]

Using icon fonts or, preferably, SVG.

[lukecarbis]

This would be tough, since presumably every site would need a different set of icons.

A workaround would be to create a select dropdown with the icon names.

[pagelab]

Specifically for icon fonts, an option is to load the icons from a json file generated by Fontello or Icomoon, as this plugin here does.

[lukecarbis]

Suppose you were using Font Awesome in your theme, you could create an Icon select dropdown that had these values:

apple-alt : Apple bacon : Bacon bone : Bone bread-slice : Bread candy-cane : Candy Cane carrot: Carrot cheese : Cheese cookie : Cookie pizza-slice: Pizza

Then in your template, you could output the icon like so:

<i class="fas fa-<?php block_field( 'icon' ); ?>"></i>

[pagelab]

Nice workaround. It would be difficult to use a select if there's too many icons, though.

Usually there's lots of icons in these libraries, so a search field would be also quite important to have.

[x5hwuk7nc6jsudcc]

It would be great if the Textarea field type allowed inputting SVG code... or if there were an SVG/HTML input field type.

[x5hwuk7nc6jsudcc]

We have a preference to use inline SVG for graphics and so finding a suitable workaround for this has been fairly important to us. This is what we are doing:

1. Use the "Image" input field type in your block (note you need to allow SVG uploads within WordPress)

2. In your block PHP, use:

<?php 
    $svg_url = get_attached_file( block_value( 'image' ) ); 
    if (substr($svg_url, -3) == 'svg') {         
        echo file_get_contents( $svg_url );
    }
    else {
        echo 'Error: File is not an SVG';  
    };
?>

[lukecarbis]

Nice @strayguevara – field validation would come in handy in this case.