Building a Font Awesome dropdown block for the WP Block Editor

Our main website pairs Font Awesome icons with headings quite frequently, so as we transition to using the Block Editor, we needed an easy way for content authors to add icons.

In the past, we used Advanced Custom Fields to allow authors to type in the CSS class for a particular icon – for example, “fa-flag”. This was less than ideal, since they had to visit the Font Awesome website, find an icon, and then correctly copy and paste the text.

Since much of the Block Editor’s appeal has to do with the fact that the editor screen looks much more like the front end view, I wanted to give our authors an easier way to see and select the icons. And since the icon always pairs with a heading, the “Icon Heading” block was born.

The icon heading block, consisting of a dropdown menu of icons, a heading, and a series of optional inner blocks

The block features a dropdown of Font Awesome 4.7 and a heading. You can also optionally add Inner Blocks, as shown in the screenshot above.

For this tutorial I’m assuming you have already built a block before, so you are familiar with npm and a little bit of block-building basics. But I’m not assuming you are a React expert, so skim through if you don’t need details for every step.

Installing npm packages

First, you’ll need to decide whether you’re going to build this block on a local install or somewhere else. My local installs never quite seem to work smoothly, so I personally build everything and then upload it to a staging site. Either way, you need to create a folder. If you’re using a local install, create the new folder inside “/wp-content/plugins/” or if you’re uploading, create the folder wherever it’s most logical for you.

Next, open up a command prompt and navigate to this new folder. Run

npm init

Next, we’ll install all the packages we need.

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @wordpress/components @wordpress/compose babel-loader css-loader ignore-emit-webpack-plugin mini-css-extract-plugin node-sass path postcss-loader postcss-preset-env sass-loader webpack webpack-cli

Once that all installs, you’ll have these Dev Dependencies in your package.json file:

  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@wordpress/components": "^8.1.0",
    "@wordpress/compose": "^3.5.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "ignore-emit-webpack-plugin": "^2.0.2",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "path": "^0.12.7",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^7.2.0",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  },

This is basically the same set of dependencies in my bare-minimum custom Webpack for blocks, except I’ve added @wordpress/components and @wordpress/compose so I can extend the SelectControl a bit.

Setting up config files

Still in package.json, replace the scripts section:

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
},

Now create a new file called .babelrc in the root folder of your plugin.

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

Then, create a file called webpack.config.js also in the root folder of your plugin.

const isProduction = process.env.NODE_ENV === 'production';
const mode = isProduction ? 'production' : 'development';
const path = require( 'path' );
const postcssPresetEnv = require( 'postcss-preset-env' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const IgnoreEmitPlugin = require( 'ignore-emit-webpack-plugin' );

const production = process.env.NODE_ENV === '';

module.exports = {
	watch: true,
	mode,
	entry: {
		index: path.resolve( process.cwd(), 'src', 'index.js' ),
		style: path.resolve( process.cwd(), 'src', 'front.scss' ),
		editor: path.resolve( process.cwd(), 'src', 'editor.scss' ),
	},
	output: {
		filename: '[name].js',
		path: path.resolve( process.cwd(), 'build' ),
	},
	optimization: {
		splitChunks: {
			cacheGroups: {
				editor: {
					name: 'editor',
					test: /editor\.(sc|sa|c)ss$/,
					chunks: 'all',
					enforce: true,
				},
				front: {
					name: 'front',
					test: /front\.(sc|sa|c)ss$/,
					chunks: 'all',
					enforce: true,
				},
				default: false,
			},
		},
	},
	module: {
		rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
			{
				test: /\.(sc|sa|c)ss$/,
				exclude: /node_modules/,
				use: [
					{
						loader: MiniCssExtractPlugin.loader,
					},
					{
						loader: 'css-loader',
						options: {
							sourceMap: false,
						},
					},
					{
						loader: 'sass-loader',
						options: {
							sourceMap: false,
						},
					},
					{
						loader: 'postcss-loader',
						options: {
							ident: 'postcss',
							plugins: () => [
								postcssPresetEnv( {
									stage: 3,
									features: {
										'custom-media-queries': {
											preserve: false,
										},
										'custom-properties': {
											preserve: true,
										},
										'nesting-rules': true,
									},
								} ),
							],
						},
					},
				],
			},
		],
	},
	plugins: [
		new MiniCssExtractPlugin( {
			filename: '[name].css',
		} ),
		new IgnoreEmitPlugin( [ 'editor.js', 'front.js', 'style.js', 'editor.deps.json', 'index.deps.json' ] ),
	]
};

We have just a few files left to create before we can really begin coding.

Setting up source files

First, create a /src/ folder inside your plugin folder to hold all of the uncompiled source code. This folder needs to contain 3 files – you can just leave them empty for now: /src/index.js, /src/editor.scss, and /src/front.scss.

Finally, create the PHP file that will tell WordPress this is all a plugin – plugin.php right in your plugin’s root directory. Make sure you include the correct dependencies for your JS, and also make sure you’re actually enqueueing Font Awesome. We happen to use two plugins on most of our sites that already enqueue Font Awesome, so instead of always enqueueing it, there is a check – this plugin will only enqueue Font Awesome if it’s not already registered by one of those plugins.

/*
Plugin Name: Icon Heading Block
*/
add_action('init', 'my_register_block');
function my_register_block() {
    // register our JavaScript
    wp_register_script(
        'icon-heading-block',
        plugins_url('/build/index.js', __FILE__),
        array('wp-blocks', 'wp-components', 'wp-element', 'wp-editor')
    );
    // register our front-end styles
    wp_register_style(
        'icon-heading-block-style',
        plugins_url('/build/front.css', __FILE__),
        array('wp-block-library')
    );
    // register our editor styles
    wp_register_style(
        'icon-heading-block-edit-style',
        plugins_url('/build/editor.css', __FILE__),
        array('wp-edit-blocks')
    );
    // register our block
    register_block_type('my/icon-heading', array(
        'editor_script' => 'icon-heading-block',
        'editor_style' => 'icon-heading-block-edit-style',
        'style' => 'icon-heading-block'
    ));
}
// Enqueue Font Awesome on both front end and back end
add_action('wp_enqueue_scripts', 'stmu_blocks_enqueue');
add_action('admin_enqueue_scripts', 'stmu_blocks_enqueue'); 
function stmu_blocks_enqueue() {
    global $wp_styles;
    // If Wordfence or Gravity Forms has already included Font Awesome, use that
    if(!isset($wp_styles->registered['wordfence-font-awesome-style']) &&
        !isset($wp_styles->registered['gform_font_awesome']) &&
        !isset($wp_styles->registered['font-awesome'])
    ) {
        wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
    }
}
?>

Two more helper files

We’re almost ready to build the block. But first, we need a dropdown component that actually lists out all of the icons. And we need that component to not only visually display each icon, we want to make sure screen readers can announce the name of each icon. Unfortunately, WP Core’s <SelectControl> won’t quite do that for us. We can style it so the icons show up, but it does not support the aria-labels we need on each option. So, we’re going to extend it.

Inside your /src/ folder, create a file called custom-select-control.js:

import { withInstanceId } from '@wordpress/compose';
import { BaseControl } from '@wordpress/components';

function SelectControl( {
	help,
	instanceId,
	label,
	multiple = false,
	onChange,
	options = [],
	className,
	hideLabelFromVision,
	...props
} ) {
	const id = `inspector-select-control-${ instanceId }`;
	const onChangeValue = ( event ) => {
		if ( multiple ) {
			const selectedOptions = [ ...event.target.options ].filter( ( { selected } ) => selected );
			const newValues = selectedOptions.map( ( { value } ) => value );
			onChange( newValues );
			return;
		}
		onChange( event.target.value );
	};

	// Disable reason: A select with an onchange throws a warning

	/* eslint-disable jsx-a11y/no-onchange */
	return ( options.length ) && (
		<BaseControl label={ label } hideLabelFromVision={ hideLabelFromVision } id={ id } help={ help } className={ className }>
			<select
				id={ id }
				className="components-select-control__input"
				onChange={ onChangeValue }
				aria-describedby={ !! help ? `${ id }__help` : undefined }
				multiple={ multiple }
				{ ...props }
			>
				{ options.map( ( option, index ) =>
					<option
						key={ `${ option.label }-${ option.value }-${ index }` }
						value={ option.value }
						disabled={ option.disabled }
						aria-label={ option.ariaLabel || '' }
					>
						{ option.label }
					</option>
				) }
			</select>
		</BaseControl>
	);
	/* eslint-enable jsx-a11y/no-onchange */
}

export default withInstanceId( SelectControl );

I don’t pretend to truly understand this code. Sally from StackExchange came to my aid when I was struggling to understand whether adding aria-labels was even possible. But, I ran into a big problem with her code, which was actually Core’s fault rather than hers: lodash kept conflicting with Underscore.js. In order to get around that issue, my developer husband showed me how to tweak the component so it doesn’t even need lodash. Problem solved. We now have a <SelectControl> – i.e. a dropdown menu – that supports an aria-label for every option.

Here’s the last helper file, also inside /src/: font-awesome-icons.js.

const dropdownOptions = [
{ label: '', value: 'fa fa-500px', ariaLabel: '500 Pixels logo' },
{ label: '', value: 'fa fa-address-book', ariaLabel: 'Address Book' },
{ label: '', value: 'fa fa-address-book-o', ariaLabel: 'Address Book Outline' },
{ label: '', value: 'fa fa-address-card', ariaLabel: 'Address Card' },
{ label: '', value: 'fa fa-address-card-o', ariaLabel: 'Address Card Outline' },
{ label: '', value: 'fa fa-adjust', ariaLabel: 'Adjust Circle half white half dark' },
{ label: '', value: 'fa fa-adn', ariaLabel: 'ADN logo' },
{ label: '', value: 'fa fa-align-center', ariaLabel: 'Align Center' },
{ label: '', value: 'fa fa-align-justify', ariaLabel: 'Align Justify' },
{ label: '', value: 'fa fa-align-left', ariaLabel: 'Align Left' },
{ label: '', value: 'fa fa-align-right', ariaLabel: 'Align Right' },
{ label: '', value: 'fa fa-amazon', ariaLabel: 'Amazon logo' },
{ label: '', value: 'fa fa-ambulance', ariaLabel: 'Ambulance' },
{ label: '', value: 'fa fa-american-sign-language-interpreting', ariaLabel: 'American Sign Language interpreting' },
{ label: '', value: 'fa fa-anchor', ariaLabel: 'Anchor' },
{ label: '', value: 'fa fa-android', ariaLabel: 'Android logo' },
{ label: '', value: 'fa fa-angellist', ariaLabel: 'Angel List logo' },
{ label: '', value: 'fa fa-angle-double-down', ariaLabel: 'Double Angle down' },
{ label: '', value: 'fa fa-angle-double-left', ariaLabel: 'Double Angle left' },
{ label: '', value: 'fa fa-angle-double-right', ariaLabel: 'Double Angle right' },
{ label: '', value: 'fa fa-angle-double-up', ariaLabel: 'Double Angle up' },
{ label: '', value: 'fa fa-angle-down', ariaLabel: 'Angle down' },
{ label: '', value: 'fa fa-angle-left', ariaLabel: 'Angle left' },
{ label: '', value: 'fa fa-angle-right', ariaLabel: 'Angle right' },
{ label: '', value: 'fa fa-angle-up', ariaLabel: 'Angle up' },
{ label: '', value: 'fa fa-apple', ariaLabel: 'Apple logo' },
{ label: '', value: 'fa fa-archive', ariaLabel: 'Archive' },
{ label: '', value: 'fa fa-area-chart', ariaLabel: 'Area chart' },
{ label: '', value: 'fa fa-arrow-circle-down', ariaLabel: 'Arrow in a circle pointing down' },
{ label: '', value: 'fa fa-arrow-circle-left', ariaLabel: 'Arrow in a circle pointing left' },
{ label: '', value: 'fa fa-arrow-circle-right', ariaLabel: 'Arrow in a circle pointing right' },
{ label: '', value: 'fa fa-arrow-circle-up', ariaLabel: 'Arrow in a circle pointing up' },
{ label: '', value: 'fa fa-arrow-circle-o-down', ariaLabel: 'Arrow in an outline circle pointing down' },
{ label: '', value: 'fa fa-arrow-circle-o-left', ariaLabel: 'Arrow in an outline circle pointing left' },
{ label: '', value: 'fa fa-arrow-circle-o-right', ariaLabel: 'Arrow in an outline circle pointing right' },
{ label: '', value: 'fa fa-arrow-circle-o-up', ariaLabel: 'Arrow in an outline circle pointing up' },
{ label: '', value: 'fa fa-arrow-down', ariaLabel: 'Arrow down' },
{ label: '', value: 'fa fa-arrow-left', ariaLabel: 'Arrow left' },
{ label: '', value: 'fa fa-arrow-right', ariaLabel: 'Arrow right' },
{ label: '', value: 'fa fa-arrow-up', ariaLabel: 'Arrow up' },
{ label: '', value: 'fa fa-arrows', ariaLabel: 'Arrows pointing up down left and right' },
{ label: '', value: 'fa fa-arrows-alt', ariaLabel: 'Arrows pointing northeast southeast southwest northwest' },
{ label: '', value: 'fa fa-arrows-h', ariaLabel: 'Arrows pointing left and right' },
{ label: '', value: 'fa fa-arrows-v', ariaLabel: 'Arrows pointing up and down' },
{ label: '', value: 'fa fa-assistive-listening-systems', ariaLabel: 'Assistive listening systems' },
{ label: '', value: 'fa fa-asterisk', ariaLabel: 'Asterisk' },
{ label: '', value: 'fa fa-at', ariaLabel: 'At symbol' },
{ label: '', value: 'fa fa-audio-description', ariaLabel: 'Audio description' },
{ label: '', value: 'fa fa-backward', ariaLabel: 'Backward rewind triangles' },
{ label: '', value: 'fa fa-balance-scale', ariaLabel: 'Scales of justice' },
{ label: '', value: 'fa fa-ban', ariaLabel: 'Ban circle with cross' },
{ label: '', value: 'fa fa-bandcamp', ariaLabel: 'Bandcamp logo' },
{ label: '', value: 'fa fa-bar-chart', ariaLabel: 'Bar chart' },
{ label: '', value: 'fa fa-barcode', ariaLabel: 'Barcode' },
{ label: '', value: 'fa fa-bars', ariaLabel: 'Three horizontal lines' },
{ label: '', value: 'fa fa-bath', ariaLabel: 'Bathtub' },
{ label: '', value: 'fa fa-battery-empty', ariaLabel: 'Battery empty' },
{ label: '', value: 'fa fa-battery-full', ariaLabel: 'Battery full' },
{ label: '', value: 'fa fa-battery-half', ariaLabel: 'Battery half charged' },
{ label: '', value: 'fa fa-battery-quarter', ariaLabel: 'Battery one quarter charged' },
{ label: '', value: 'fa fa-battery-three-quarters', ariaLabel: 'Battery three quarters charged' },
{ label: '', value: 'fa fa-bed', ariaLabel: 'Bed' },
{ label: '', value: 'fa fa-beer', ariaLabel: 'Beer' },
{ label: '', value: 'fa fa-behance', ariaLabel: 'Behance logo' },
{ label: '', value: 'fa fa-behance-square', ariaLabel: 'Behance logo in square' },
{ label: '', value: 'fa fa-bell', ariaLabel: 'Bell' },
{ label: '', value: 'fa fa-bell-o', ariaLabel: 'Bell outline' },
{ label: '', value: 'fa fa-bell-slash', ariaLabel: 'Bell slashed' },
{ label: '', value: 'fa fa-bell-slash-o', ariaLabel: 'Bell slashed outline' },
{ label: '', value: 'fa fa-bicycle', ariaLabel: 'Bicycle' },
{ label: '', value: 'fa fa-binoculars', ariaLabel: 'Binoculars' },
{ label: '', value: 'fa fa-birthday-cake', ariaLabel: 'Birthday Cake' },
{ label: '', value: 'fa fa-bitbucket', ariaLabel: 'Bitbucket logo' },
{ label: '', value: 'fa fa-bitbucket-square', ariaLabel: 'Bitbucket logo in square' },
{ label: '', value: 'fa fa-black-tie', ariaLabel: 'Black tie' },
{ label: '', value: 'fa fa-blind', ariaLabel: 'Blind' },
{ label: '', value: 'fa fa-bluetooth', ariaLabel: 'Bluetooth in oval' },
{ label: '', value: 'fa fa-bluetooth-b', ariaLabel: 'Bluetooth' },
{ label: '', value: 'fa fa-bold', ariaLabel: 'Bold' },
{ label: '', value: 'fa fa-bolt', ariaLabel: 'Lightning bolt' },
{ label: '', value: 'fa fa-bomb', ariaLabel: 'Bomb' },
{ label: '', value: 'fa fa-book', ariaLabel: 'Book' },
{ label: '', value: 'fa fa-bookmark', ariaLabel: 'Bookmark' },
{ label: '', value: 'fa fa-bookmark-o', ariaLabel: 'Bookmark outline' },
{ label: '', value: 'fa fa-braille', ariaLabel: 'Braille' },
{ label: '', value: 'fa fa-briefcase', ariaLabel: 'Briefcase' },
{ label: '', value: 'fa fa-bug', ariaLabel: 'Bug' },
{ label: '', value: 'fa fa-building', ariaLabel: 'Building' },
{ label: '', value: 'fa fa-building-o', ariaLabel: 'Building outline' },
{ label: '', value: 'fa fa-bullhorn', ariaLabel: 'Bullhorn' },
{ label: '', value: 'fa fa-bullseye', ariaLabel: 'Bullseye' },
{ label: '', value: 'fa fa-bus', ariaLabel: 'Bus' },
{ label: '', value: 'fa fa-buysellads', ariaLabel: 'Buy Sell Ads logo' },
{ label: '', value: 'fa fa-calculator', ariaLabel: 'Calculator' },
{ label: '', value: 'fa fa-calendar', ariaLabel: 'Calendar' },
{ label: '', value: 'fa fa-calendar-check-o', ariaLabel: 'Calendar with checkmark outline' },
{ label: '', value: 'fa fa-calendar-minus-o', ariaLabel: 'Calendar with minus outline' },
{ label: '', value: 'fa fa-calendar-o', ariaLabel: 'Calendar outline' },
{ label: '', value: 'fa fa-calendar-plus-o', ariaLabel: 'Calendar with plus outline' },
{ label: '', value: 'fa fa-calendar-times-o', ariaLabel: 'Calendar with times outline' },
{ label: '', value: 'fa fa-camera', ariaLabel: 'Camera' },
{ label: '', value: 'fa fa-camera-retro', ariaLabel: 'Retro Camera' },
{ label: '', value: 'fa fa-car', ariaLabel: 'Car' },
{ label: '', value: 'fa fa-caret-down', ariaLabel: 'Caret down' },
{ label: '', value: 'fa fa-caret-left', ariaLabel: 'Caret left' },
{ label: '', value: 'fa fa-caret-right', ariaLabel: 'Caret right' },
{ label: '', value: 'fa fa-caret-up', ariaLabel: 'Caret up' },
{ label: '', value: 'fa fa-caret-square-o-down', ariaLabel: 'Caret in square down' },
{ label: '', value: 'fa fa-caret-square-o-left', ariaLabel: 'Caret in square left' },
{ label: '', value: 'fa fa-caret-square-o-right', ariaLabel: 'Caret in square right' },
{ label: '', value: 'fa fa-caret-square-o-up', ariaLabel: 'Caret in square up' },
{ label: '', value: 'fa fa-cc', ariaLabel: 'Closed captioning' },
{ label: '', value: 'fa fa-cc-amex', ariaLabel: 'American Express logo' },
{ label: '', value: 'fa fa-cc-diners-club', ariaLabel: 'Diners Club logo' },
{ label: '', value: 'fa fa-cc-discover', ariaLabel: 'Discover card logo' },
{ label: '', value: 'fa fa-cc-jcb', ariaLabel: 'JCB card logo' },
{ label: '', value: 'fa fa-cc-mastercard', ariaLabel: 'MasterCard logo' },
{ label: '', value: 'fa fa-cc-paypal', ariaLabel: 'PayPal logo' },
{ label: '', value: 'fa fa-cc-stripe', ariaLabel: 'Stripe logo' },
{ label: '', value: 'fa fa-cc-visa', ariaLabel: 'Visa card logo' },
{ label: '', value: 'fa fa-certificate', ariaLabel: 'Certificate award starburst' },
{ label: '', value: 'fa fa-chain-broken', ariaLabel: 'Broken chain' },
{ label: '', value: 'fa fa-check', ariaLabel: 'Checkmark' },
{ label: '', value: 'fa fa-check-circle', ariaLabel: 'Checkmark in circle' },
{ label: '', value: 'fa fa-check-circle-o', ariaLabel: 'Checkmark in circle outline' },
{ label: '', value: 'fa fa-check-square', ariaLabel: 'Checkmark in square' },
{ label: '', value: 'fa fa-check-square-o', ariaLabel: 'Checkmark in square outline' },
{ label: '', value: 'fa fa-chevron-circle-down', ariaLabel: 'Chevron in circle down' },
{ label: '', value: 'fa fa-chevron-circle-left', ariaLabel: 'Chevron in circle left' },
{ label: '', value: 'fa fa-chevron-circle-right', ariaLabel: 'Chevron in circle right' },
{ label: '', value: 'fa fa-chevron-circle-up', ariaLabel: 'Chevron in circle up' },
{ label: '', value: 'fa fa-chevron-down', ariaLabel: 'Chevron down' },
{ label: '', value: 'fa fa-chevron-left', ariaLabel: 'Chevron left' },
{ label: '', value: 'fa fa-chevron-right', ariaLabel: 'Chevron right' },
{ label: '', value: 'fa fa-chevron-up', ariaLabel: 'Chevron up' },
{ label: '', value: 'fa fa-child', ariaLabel: 'Child' },
{ label: '', value: 'fa fa-chrome', ariaLabel: 'Google Chrome logo' },
{ label: '', value: 'fa fa-circle', ariaLabel: 'Circle' },
{ label: '', value: 'fa fa-circle-o', ariaLabel: 'Circle outline' },
{ label: '', value: 'fa fa-circle-o-notch', ariaLabel: 'Circle outline with notch at top' },
{ label: '', value: 'fa fa-circle-thin', ariaLabel: 'Thin circle outline' },
{ label: '', value: 'fa fa-clipboard', ariaLabel: 'Clipboard' },
{ label: '', value: 'fa fa-clock-o', ariaLabel: 'Clock outline' },
{ label: '', value: 'fa fa-clone', ariaLabel: 'Clone two squares' },
{ label: '', value: 'fa fa-cloud', ariaLabel: 'Cloud' },
{ label: '', value: 'fa fa-cloud-download', ariaLabel: 'Cloud with down arrow' },
{ label: '', value: 'fa fa-cloud-upload', ariaLabel: 'Cloud with up arrow' },
{ label: '', value: 'fa fa-code', ariaLabel: 'Code tags' },
{ label: '', value: 'fa fa-code-fork', ariaLabel: 'Code fork' },
{ label: '', value: 'fa fa-codepen', ariaLabel: 'Codepen logo' },
{ label: '', value: 'fa fa-codiepie', ariaLabel: 'Codiepie logo' },
{ label: '', value: 'fa fa-coffee', ariaLabel: 'Coffee' },
{ label: '', value: 'fa fa-cog', ariaLabel: 'Cog' },
{ label: '', value: 'fa fa-cogs', ariaLabel: 'Cogs' },
{ label: '', value: 'fa fa-columns', ariaLabel: 'Columns' },
{ label: '', value: 'fa fa-comment', ariaLabel: 'Comment bubble' },
{ label: '', value: 'fa fa-comment-o', ariaLabel: 'Comment bubble outline' },
{ label: '', value: 'fa fa-commenting', ariaLabel: 'Comment bubble with ellipsis' },
{ label: '', value: 'fa fa-commenting-o', ariaLabel: 'Comment bubble outline with ellipsis' },
{ label: '', value: 'fa fa-comments', ariaLabel: 'Two comment bubbles' },
{ label: '', value: 'fa fa-comments-o', ariaLabel: 'Two comment bubble outlines' },
{ label: '', value: 'fa fa-compass', ariaLabel: 'Compass' },
{ label: '', value: 'fa fa-compress', ariaLabel: 'Compress' },
{ label: '', value: 'fa fa-connectdevelop', ariaLabel: 'Connect Develop logo' },
{ label: '', value: 'fa fa-contao', ariaLabel: 'Contao logo' },
{ label: '', value: 'fa fa-copyright', ariaLabel: 'Copyright' },
{ label: '', value: 'fa fa-creative-commons', ariaLabel: 'Creative Commons' },
{ label: '', value: 'fa fa-credit-card', ariaLabel: 'Credit Card outline' },
{ label: '', value: 'fa fa-credit-card-alt', ariaLabel: 'Credit Card' },
{ label: '', value: 'fa fa-crop', ariaLabel: 'Crop' },
{ label: '', value: 'fa fa-crosshairs', ariaLabel: 'Crosshairs' },
{ label: '', value: 'fa fa-css3', ariaLabel: '' },
{ label: '', value: 'fa fa-cube', ariaLabel: '' },
{ label: '', value: 'fa fa-cubes', ariaLabel: '' },
{ label: '', value: 'fa fa-cutlery', ariaLabel: '' },
{ label: '', value: 'fa fa-dashcube', ariaLabel: '' },
{ label: '', value: 'fa fa-database', ariaLabel: '' },
{ label: '', value: 'fa fa-deaf', ariaLabel: '' },
{ label: '', value: 'fa fa-delicious', ariaLabel: '' },
{ label: '', value: 'fa fa-desktop', ariaLabel: '' },
{ label: '', value: 'fa fa-deviantart', ariaLabel: '' },
{ label: '', value: 'fa fa-diamond', ariaLabel: '' },
{ label: '', value: 'fa fa-digg', ariaLabel: '' },
{ label: '', value: 'fa fa-dot-circle-o', ariaLabel: '' },
{ label: '', value: 'fa fa-download', ariaLabel: '' },
{ label: '', value: 'fa fa-dribbble', ariaLabel: '' },
{ label: '', value: 'fa fa-dropbox', ariaLabel: '' },
{ label: '', value: 'fa fa-drupal', ariaLabel: '' },
{ label: '', value: 'fa fa-edge', ariaLabel: '' },
{ label: '', value: 'fa fa-eercast', ariaLabel: '' },
{ label: '', value: 'fa fa-eject', ariaLabel: '' },
{ label: '', value: 'fa fa-ellipsis-h', ariaLabel: '' },
{ label: '', value: 'fa fa-ellipsis-v', ariaLabel: '' },
{ label: '', value: 'fa fa-empire', ariaLabel: '' },
{ label: '', value: 'fa fa-envelope', ariaLabel: '' },
{ label: '', value: 'fa fa-envelope-o', ariaLabel: '' },
{ label: '', value: 'fa fa-envelope-open', ariaLabel: '' },
{ label: '', value: 'fa fa-envelope-open-o', ariaLabel: '' },
{ label: '', value: 'fa fa-envelope-square', ariaLabel: '' },
{ label: '', value: 'fa fa-envira', ariaLabel: '' },
{ label: '', value: 'fa fa-eraser', ariaLabel: '' },
{ label: '', value: 'fa fa-etsy', ariaLabel: '' },
{ label: '', value: 'fa fa-exchange', ariaLabel: '' },
{ label: '', value: 'fa fa-exclamation', ariaLabel: '' },
{ label: '', value: 'fa fa-exclamation-circle', ariaLabel: '' },
{ label: '', value: 'fa fa-exclamation-triangle', ariaLabel: '' },
{ label: '', value: 'fa fa-expand', ariaLabel: '' },
{ label: '', value: 'fa fa-expeditedssl', ariaLabel: '' },
{ label: '', value: 'fa fa-external-link', ariaLabel: '' },
{ label: '', value: 'fa fa-external-link-square', ariaLabel: '' },
{ label: '', value: 'fa fa-eye', ariaLabel: '' },
{ label: '', value: 'fa fa-eye-slash', ariaLabel: '' },
{ label: '', value: 'fa fa-eyedropper', ariaLabel: '' },
{ label: '', value: 'fa fa-facebook', ariaLabel: '' },
{ label: '', value: 'fa fa-facebook-official', ariaLabel: '' },
{ label: '', value: 'fa fa-facebook-square', ariaLabel: '' },
{ label: '', value: 'fa fa-fast-backward', ariaLabel: '' },
{ label: '', value: 'fa fa-fast-forward', ariaLabel: '' },
{ label: '', value: 'fa fa-fax', ariaLabel: '' },
{ label: '', value: 'fa fa-female', ariaLabel: '' },
{ label: '', value: 'fa fa-fighter-jet', ariaLabel: '' },
{ label: '', value: 'fa fa-file', ariaLabel: '' },
{ label: '', value: 'fa fa-file-archive-o', ariaLabel: '' },
{ label: '', value: 'fa fa-file-audio-o', ariaLabel: '' },
{ label: '', value: 'fa fa-file-code-o', ariaLabel: '' },
{ label: '', value: 'fa fa-file-excel-o', ariaLabel: '' },
{ label: '', value: 'fa fa-file-image-o', ariaLabel: '' },
{ label: '', value: 'fa fa-file-o', ariaLabel: '' },
{ label: '', value: 'fa fa-file-pdf-o', ariaLabel: '' },
{ label: '', value: 'fa fa-file-powerpoint-o', ariaLabel: '' },
{ label: '', value: 'fa fa-file-text', ariaLabel: '' },
{ label: '', value: 'fa fa-file-text-o', ariaLabel: '' },
{ label: '', value: 'fa fa-file-video-o', ariaLabel: '' },
{ label: '', value: 'fa fa-file-word-o', ariaLabel: '' },
{ label: '', value: 'fa fa-files-o', ariaLabel: '' },
{ label: '', value: 'fa fa-film', ariaLabel: '' },
{ label: '', value: 'fa fa-filter', ariaLabel: '' },
{ label: '', value: 'fa fa-fire', ariaLabel: '' },
{ label: '', value: 'fa fa-fire-extinguisher', ariaLabel: '' },
{ label: '', value: 'fa fa-firefox', ariaLabel: '' },
{ label: '', value: 'fa fa-first-order', ariaLabel: '' },
{ label: '', value: 'fa fa-flag', ariaLabel: '' },
{ label: '', value: 'fa fa-flag-checkered', ariaLabel: '' },
{ label: '', value: 'fa fa-flag-o', ariaLabel: '' },
{ label: '', value: 'fa fa-flask', ariaLabel: '' },
{ label: '', value: 'fa fa-flickr', ariaLabel: '' },
{ label: '', value: 'fa fa-floppy-o', ariaLabel: '' },
{ label: '', value: 'fa fa-folder', ariaLabel: '' },
{ label: '', value: 'fa fa-folder-o', ariaLabel: '' },
{ label: '', value: 'fa fa-folder-open', ariaLabel: '' },
{ label: '', value: 'fa fa-folder-open-o', ariaLabel: '' },
{ label: '', value: 'fa fa-font', ariaLabel: '' },
{ label: '', value: 'fa fa-font-awesome', ariaLabel: '' },
{ label: '', value: 'fa fa-fonticons', ariaLabel: '' },
{ label: '', value: 'fa fa-fort-awesome', ariaLabel: '' },
{ label: '', value: 'fa fa-forumbee', ariaLabel: '' },
{ label: '', value: 'fa fa-forward', ariaLabel: '' },
{ label: '', value: 'fa fa-foursquare', ariaLabel: '' },
{ label: '', value: 'fa fa-free-code-camp', ariaLabel: '' },
{ label: '', value: 'fa fa-frown-o', ariaLabel: '' },
{ label: '', value: 'fa fa-futbol-o', ariaLabel: '' },
{ label: '', value: 'fa fa-gamepad', ariaLabel: '' },
{ label: '', value: 'fa fa-gavel', ariaLabel: '' },
{ label: '', value: 'fa fa-genderless', ariaLabel: '' },
{ label: '', value: 'fa fa-get-pocket', ariaLabel: '' },
{ label: '', value: 'fa fa-gift', ariaLabel: '' },
{ label: '', value: 'fa fa-git', ariaLabel: '' },
{ label: '', value: 'fa fa-git-square', ariaLabel: '' },
{ label: '', value: 'fa fa-github', ariaLabel: '' },
{ label: '', value: 'fa fa-github-alt', ariaLabel: '' },
{ label: '', value: 'fa fa-github-square', ariaLabel: '' },
{ label: '', value: 'fa fa-gitlab', ariaLabel: '' },
{ label: '', value: 'fa fa-glass', ariaLabel: '' },
{ label: '', value: 'fa fa-glide', ariaLabel: '' },
{ label: '', value: 'fa fa-glide-g', ariaLabel: '' },
{ label: '', value: 'fa fa-globe', ariaLabel: '' },
{ label: '', value: 'fa fa-google', ariaLabel: '' },
{ label: '', value: 'fa fa-google-plus', ariaLabel: '' },
{ label: '', value: 'fa fa-google-plus-official', ariaLabel: '' },
{ label: '', value: 'fa fa-google-plus-square', ariaLabel: '' },
{ label: '', value: 'fa fa-google-wallet', ariaLabel: '' },
{ label: '', value: 'fa fa-graduation-cap', ariaLabel: '' },
{ label: '', value: 'fa fa-gratipay', ariaLabel: '' },
{ label: '', value: 'fa fa-grav', ariaLabel: '' },
{ label: '', value: 'fa fa-h-square', ariaLabel: '' },
{ label: '', value: 'fa fa-hacker-news', ariaLabel: '' },
{ label: '', value: 'fa fa-hand-lizard-o', ariaLabel: '' },
{ label: '', value: 'fa fa-hand-o-down', ariaLabel: '' },
{ label: '', value: 'fa fa-hand-o-left', ariaLabel: '' },
{ label: '', value: 'fa fa-hand-o-right', ariaLabel: '' },
{ label: '', value: 'fa fa-hand-o-up', ariaLabel: '' },
{ label: '', value: 'fa fa-hand-paper-o', ariaLabel: '' },
{ label: '', value: 'fa fa-hand-peace-o', ariaLabel: '' },
{ label: '', value: 'fa fa-hand-pointer-o', ariaLabel: '' },
{ label: '', value: 'fa fa-hand-rock-o', ariaLabel: '' },
{ label: '', value: 'fa fa-hand-scissors-o', ariaLabel: '' },
{ label: '', value: 'fa fa-hand-spock-o', ariaLabel: '' },
{ label: '', value: 'fa fa-handshake-o', ariaLabel: '' },
{ label: '', value: 'fa fa-hashtag', ariaLabel: '' },
{ label: '', value: 'fa fa-hdd-o', ariaLabel: '' },
{ label: '', value: 'fa fa-header', ariaLabel: '' },
{ label: '', value: 'fa fa-headphones', ariaLabel: '' },
{ label: '', value: 'fa fa-heart', ariaLabel: '' },
{ label: '', value: 'fa fa-heart-o', ariaLabel: '' },
{ label: '', value: 'fa fa-heartbeat', ariaLabel: '' },
{ label: '', value: 'fa fa-history', ariaLabel: '' },
{ label: '', value: 'fa fa-home', ariaLabel: '' },
{ label: '', value: 'fa fa-hospital-o', ariaLabel: '' },
{ label: '', value: 'fa fa-hourglass', ariaLabel: '' },
{ label: '', value: 'fa fa-hourglass-end', ariaLabel: '' },
{ label: '', value: 'fa fa-hourglass-half', ariaLabel: '' },
{ label: '', value: 'fa fa-hourglass-o', ariaLabel: '' },
{ label: '', value: 'fa fa-hourglass-start', ariaLabel: '' },
{ label: '', value: 'fa fa-houzz', ariaLabel: 'Houzz logo' },
{ label: '', value: 'fa fa-html5', ariaLabel: 'HTML5' },
{ label: '', value: 'fa fa-i-cursor', ariaLabel: 'Text cursor' },
{ label: '', value: 'fa fa-id-badge', ariaLabel: 'ID badge' },
{ label: '', value: 'fa fa-id-card', ariaLabel: 'ID card' },
{ label: '', value: 'fa fa-id-card-o', ariaLabel: 'ID card outline' },
{ label: '', value: 'fa fa-imdb', ariaLabel: 'IMDB' },
{ label: '', value: 'fa fa-inbox', ariaLabel: 'Inbox' },
{ label: '', value: 'fa fa-indent', ariaLabel: 'Indent' },
{ label: '', value: 'fa fa-industry', ariaLabel: 'Industry' },
{ label: '', value: 'fa fa-info', ariaLabel: 'Lowercase i' },
{ label: '', value: 'fa fa-info-circle', ariaLabel: 'Lowercase i in a circle' },
{ label: '', value: 'fa fa-instagram', ariaLabel: 'Instagram logo' },
{ label: '', value: 'fa fa-internet-explorer', ariaLabel: 'Internet Explorer logo' },
{ label: '', value: 'fa fa-ioxhost', ariaLabel: 'IOX Host logo' },
{ label: '', value: 'fa fa-italic', ariaLabel: 'Italic' },
{ label: '', value: 'fa fa-joomla', ariaLabel: 'Joomla' },
{ label: '', value: 'fa fa-jsfiddle', ariaLabel: 'JSFiddle' },
{ label: '', value: 'fa fa-key', ariaLabel: 'Key' },
{ label: '', value: 'fa fa-keyboard-o', ariaLabel: 'Keyboard outline' },
{ label: '', value: 'fa fa-language', ariaLabel: 'Language' },
{ label: '', value: 'fa fa-laptop', ariaLabel: 'Laptop' },
{ label: '', value: 'fa fa-lastfm', ariaLabel: 'LastFM logo' },
{ label: '', value: 'fa fa-lastfm-square', ariaLabel: 'LastFM logo in a square' },
{ label: '', value: 'fa fa-leaf', ariaLabel: 'Leaf' },
{ label: '', value: 'fa fa-leanpub', ariaLabel: 'Lean Pub logo' },
{ label: '', value: 'fa fa-lemon-o', ariaLabel: 'Lemon outline' },
{ label: '', value: 'fa fa-level-down', ariaLabel: 'Level down arrow' },
{ label: '', value: 'fa fa-level-up', ariaLabel: 'Level up arrow' },
{ label: '', value: 'fa fa-life-ring', ariaLabel: 'Life preserver' },
{ label: '', value: 'fa fa-lightbulb-o', ariaLabel: 'Light bulb outline' },
{ label: '', value: 'fa fa-line-chart', ariaLabel: 'Line chart' },
{ label: '', value: 'fa fa-link', ariaLabel: 'Link' },
{ label: '', value: 'fa fa-linkedin', ariaLabel: 'LinkedIn logo' },
{ label: '', value: 'fa fa-linkedin-square', ariaLabel: 'LinkedIn logo in square' },
{ label: '', value: 'fa fa-linode', ariaLabel: 'Linode' },
{ label: '', value: 'fa fa-linux', ariaLabel: 'Linux' },
{ label: '', value: 'fa fa-list', ariaLabel: 'List' },
{ label: '', value: 'fa fa-list-alt', ariaLabel: 'List with styled heading' },
{ label: '', value: 'fa fa-list-ol', ariaLabel: 'List with numbers' },
{ label: '', value: 'fa fa-list-ul', ariaLabel: 'List with bullets' },
{ label: '', value: 'fa fa-location-arrow', ariaLabel: 'Location arrow' },
{ label: '', value: 'fa fa-lock', ariaLabel: 'Lock' },
{ label: '', value: 'fa fa-long-arrow-down', ariaLabel: 'Long arrow down' },
{ label: '', value: 'fa fa-long-arrow-left', ariaLabel: 'Long arrow left' },
{ label: '', value: 'fa fa-long-arrow-right', ariaLabel: 'Long arrow right' },
{ label: '', value: 'fa fa-long-arrow-up', ariaLabel: 'Long arrow up' },
{ label: '', value: 'fa fa-low-vision', ariaLabel: 'Low vision' },
{ label: '', value: 'fa fa-magic', ariaLabel: 'Magic wand' },
{ label: '', value: 'fa fa-magnet', ariaLabel: 'Magnet' },
{ label: '', value: 'fa fa-male', ariaLabel: 'Male' },
{ label: '', value: 'fa fa-map', ariaLabel: 'Map' },
{ label: '', value: 'fa fa-map-marker', ariaLabel: 'Map marker' },
{ label: '', value: 'fa fa-map-o', ariaLabel: 'Map outline' },
{ label: '', value: 'fa fa-map-pin', ariaLabel: 'Map pin' },
{ label: '', value: 'fa fa-map-signs', ariaLabel: 'Map signs' },
{ label: '', value: 'fa fa-mars', ariaLabel: 'Mars' },
{ label: '', value: 'fa fa-mars-double', ariaLabel: 'Two Mars symbols' },
{ label: '', value: 'fa fa-mars-stroke', ariaLabel: 'Mars with stroke' },
{ label: '', value: 'fa fa-mars-stroke-h', ariaLabel: 'Mars with stroke horizontal' },
{ label: '', value: 'fa fa-mars-stroke-v', ariaLabel: 'Mars with stroke vertical' },
{ label: '', value: 'fa fa-transgender', ariaLabel: 'Transgender with 2 genders' },
{ label: '', value: 'fa fa-transgender-alt', ariaLabel: 'Transgender with 3 genders' },
{ label: '', value: 'fa fa-venus', ariaLabel: 'Venus symbol' },
{ label: '', value: 'fa fa-venus-double', ariaLabel: 'Venus double' },
{ label: '', value: 'fa fa-venus-mars', ariaLabel: 'Venus and Mars' },
{ label: '', value: 'fa fa-maxcdn', ariaLabel: 'MaxCDN logo' },
{ label: '', value: 'fa fa-meanpath', ariaLabel: 'MeanPath logo' },
{ label: '', value: 'fa fa-medium', ariaLabel: 'Medium logo' },
{ label: '', value: 'fa fa-medkit', ariaLabel: 'Medical kit' },
{ label: '', value: 'fa fa-meetup', ariaLabel: 'Meetup logo' },
{ label: '', value: 'fa fa-meh-o', ariaLabel: 'Meh smiley outline' },
{ label: '', value: 'fa fa-smile-o', ariaLabel: 'Smiling face outline' },
{ label: '', value: 'fa fa-mercury', ariaLabel: 'Mercury' },
{ label: '', value: 'fa fa-microchip', ariaLabel: 'Microchip' },
{ label: '', value: 'fa fa-microphone', ariaLabel: 'Microphone' },
{ label: '', value: 'fa fa-microphone-slash', ariaLabel: 'Microphone slashed out' },
{ label: '', value: 'fa fa-minus', ariaLabel: 'Minus' },
{ label: '', value: 'fa fa-minus-circle', ariaLabel: 'Minus in circle' },
{ label: '', value: 'fa fa-minus-square', ariaLabel: 'Minus in square' },
{ label: '', value: 'fa fa-minus-square-o', ariaLabel: 'Minus in square outline' },
{ label: '', value: 'fa fa-mixcloud', ariaLabel: 'MixCloud logo' },
{ label: '', value: 'fa fa-mobile', ariaLabel: 'Mobile phone' },
{ label: '', value: 'fa fa-modx', ariaLabel: 'ModX logo' },
{ label: '', value: 'fa fa-money', ariaLabel: 'Money' },
{ label: '', value: 'fa fa-moon-o', ariaLabel: 'Crescent moon outline' },
{ label: '', value: 'fa fa-motorcycle', ariaLabel: 'Motorcycle' },
{ label: '', value: 'fa fa-mouse-pointer', ariaLabel: 'Mouse pointer' },
{ label: '', value: 'fa fa-music', ariaLabel: 'Music notes' },
{ label: '', value: 'fa fa-neuter', ariaLabel: 'Neuter' },
{ label: '', value: 'fa fa-newspaper-o', ariaLabel: 'Newspaper outline' },
{ label: '', value: 'fa fa-object-group', ariaLabel: 'Object group' },
{ label: '', value: 'fa fa-object-ungroup', ariaLabel: 'Object ungroup' },
{ label: '', value: 'fa fa-odnoklassniki', ariaLabel: 'Odnoklassniki logo' },
{ label: '', value: 'fa fa-odnoklassniki-square', ariaLabel: 'Odnoklassniki logo in square' },
{ label: '', value: 'fa fa-opencart', ariaLabel: 'OpenCart logo' },
{ label: '', value: 'fa fa-openid', ariaLabel: 'OpenID logo' },
{ label: '', value: 'fa fa-opera', ariaLabel: 'Opera logo' },
{ label: '', value: 'fa fa-optin-monster', ariaLabel: 'Optin Monster logo' },
{ label: '', value: 'fa fa-outdent', ariaLabel: 'Outdent' },
{ label: '', value: 'fa fa-pagelines', ariaLabel: 'Pagelines logo' },
{ label: '', value: 'fa fa-paint-brush', ariaLabel: 'Paintbrush' },
{ label: '', value: 'fa fa-paper-plane', ariaLabel: 'Paper plane' },
{ label: '', value: 'fa fa-paper-plane-o', ariaLabel: 'Paper plane outline' },
{ label: '', value: 'fa fa-paperclip', ariaLabel: 'Paperclip' },
{ label: '', value: 'fa fa-paragraph', ariaLabel: 'Paragraph' },
{ label: '', value: 'fa fa-pause', ariaLabel: 'Pause' },
{ label: '', value: 'fa fa-pause-circle', ariaLabel: 'Pause in circle' },
{ label: '', value: 'fa fa-pause-circle-o', ariaLabel: 'Pause in circle outline' },
{ label: '', value: 'fa fa-paw', ariaLabel: 'Paw' },
{ label: '', value: 'fa fa-paypal', ariaLabel: 'PayPal' },
{ label: '', value: 'fa fa-pencil', ariaLabel: 'Pencil' },
{ label: '', value: 'fa fa-pencil-square', ariaLabel: 'Pencil in square' },
{ label: '', value: 'fa fa-pencil-square-o', ariaLabel: 'Pencil in square outline' },
{ label: '', value: 'fa fa-percent', ariaLabel: 'Percent' },
{ label: '', value: 'fa fa-phone', ariaLabel: 'Phone' },
{ label: '', value: 'fa fa-phone-square', ariaLabel: 'Phone in square' },
{ label: '', value: 'fa fa-picture-o', ariaLabel: 'Picture' },
{ label: '', value: 'fa fa-pie-chart', ariaLabel: 'Pie chart' },
{ label: '', value: 'fa fa-pied-piper', ariaLabel: 'Pied Piper hat logo' },
{ label: '', value: 'fa fa-pied-piper-alt', ariaLabel: 'Pied Piper silhouette logo' },
{ label: '', value: 'fa fa-pied-piper-pp', ariaLabel: 'Pied Piper PP logo' },
{ label: '', value: 'fa fa-pinterest', ariaLabel: 'Pinterest logo in circle' },
{ label: '', value: 'fa fa-pinterest-p', ariaLabel: 'Pinterest logo' },
{ label: '', value: 'fa fa-pinterest-square', ariaLabel: 'Pinterest logo in square' },
{ label: '', value: 'fa fa-plane', ariaLabel: 'Plane' },
{ label: '', value: 'fa fa-play', ariaLabel: 'Play button' },
{ label: '', value: 'fa fa-play-circle', ariaLabel: 'Play button in circle' },
{ label: '', value: 'fa fa-play-circle-o', ariaLabel: 'Play button in circle outline' },
{ label: '', value: 'fa fa-plug', ariaLabel: 'Plug' },
{ label: '', value: 'fa fa-podcast', ariaLabel: 'Podcast' },
{ label: '', value: 'fa fa-power-off', ariaLabel: 'Power off' },
{ label: '', value: 'fa fa-print', ariaLabel: 'Printer' },
{ label: '', value: 'fa fa-product-hunt', ariaLabel: 'Product Hunt logo' },
{ label: '', value: 'fa fa-puzzle-piece', ariaLabel: 'Puzzle piece' },
{ label: '', value: 'fa fa-qq', ariaLabel: 'QQ logo' },
{ label: '', value: 'fa fa-qrcode', ariaLabel: 'QR code' },
{ label: '', value: 'fa fa-question', ariaLabel: 'Question mark' },
{ label: '', value: 'fa fa-question-circle', ariaLabel: 'Question mark in circle' },
{ label: '', value: 'fa fa-question-circle-o', ariaLabel: 'Question mark in circle outline' },
{ label: '', value: 'fa fa-quora', ariaLabel: 'Quora' },
{ label: '', value: 'fa fa-quote-left', ariaLabel: 'Opening double quotation mark' },
{ label: '', value: 'fa fa-quote-right', ariaLabel: 'Closing double quotation mark' },
{ label: '', value: 'fa fa-random', ariaLabel: 'Two criss-crossing arrows' },
{ label: '', value: 'fa fa-ravelry', ariaLabel: 'Ravelry logo' },
{ label: '', value: 'fa fa-rebel', ariaLabel: 'Rebel logo' },
{ label: '', value: 'fa fa-recycle', ariaLabel: 'Recycle' },
{ label: '', value: 'fa fa-reddit', ariaLabel: 'Reddit logo' },
{ label: '', value: 'fa fa-reddit-alien', ariaLabel: 'Reddit alien' },
{ label: '', value: 'fa fa-reddit-square', ariaLabel: 'Reddit logo in square' },
{ label: '', value: 'fa fa-refresh', ariaLabel: 'Refresh arrows' },
{ label: '', value: 'fa fa-registered', ariaLabel: 'Registered trademark' },
{ label: '', value: 'fa fa-renren', ariaLabel: 'Ren Ren logo' },
{ label: '', value: 'fa fa-repeat', ariaLabel: 'Repeat' },
{ label: '', value: 'fa fa-reply', ariaLabel: 'Reply arrow' },
{ label: '', value: 'fa fa-reply-all', ariaLabel: 'Reply to all arrows' },
{ label: '', value: 'fa fa-retweet', ariaLabel: 'Retweet arrows' },
{ label: '', value: 'fa fa-road', ariaLabel: 'Road' },
{ label: '', value: 'fa fa-rocket', ariaLabel: 'Rocketship' },
{ label: '', value: 'fa fa-rss', ariaLabel: 'RSS' },
{ label: '', value: 'fa fa-rss-square', ariaLabel: 'RSS in square' },
{ label: '', value: 'fa fa-safari', ariaLabel: 'Safari logo' },
{ label: '', value: 'fa fa-scissors', ariaLabel: 'Scissors' },
{ label: '', value: 'fa fa-scribd', ariaLabel: 'Scribd logo' },
{ label: '', value: 'fa fa-search', ariaLabel: 'Search magnifying glass' },
{ label: '', value: 'fa fa-search-minus', ariaLabel: 'Search magnifying glass with minus' },
{ label: '', value: 'fa fa-search-plus', ariaLabel: 'Search magnifying glass with plus' },
{ label: '', value: 'fa fa-sellsy', ariaLabel: 'Sellsy logo' },
{ label: '', value: 'fa fa-server', ariaLabel: 'Server stacks' },
{ label: '', value: 'fa fa-share', ariaLabel: 'Share arrow' },
{ label: '', value: 'fa fa-share-alt', ariaLabel: 'Share branches' },
{ label: '', value: 'fa fa-share-alt-square', ariaLabel: 'Share branches in square' },
{ label: '', value: 'fa fa-share-square', ariaLabel: 'Share arrow in square' },
{ label: '', value: 'fa fa-share-square-o', ariaLabel: 'Share arrow in square outline' },
{ label: '', value: 'fa fa-shield', ariaLabel: 'Shield' },
{ label: '', value: 'fa fa-ship', ariaLabel: 'Ship' },
{ label: '', value: 'fa fa-shirtsinbulk', ariaLabel: 'Shirts in Bulk logo' },
{ label: '', value: 'fa fa-shopping-bag', ariaLabel: 'Shopping bag' },
{ label: '', value: 'fa fa-shopping-basket', ariaLabel: 'Shopping basket' },
{ label: '', value: 'fa fa-shopping-cart', ariaLabel: 'Shopping cart' },
{ label: '', value: 'fa fa-cart-arrow-down', ariaLabel: 'Shopping cart with down arrow' },
{ label: '', value: 'fa fa-cart-plus', ariaLabel: 'Shopping cart with plus' },
{ label: '', value: 'fa fa-shower', ariaLabel: 'Shower' },
{ label: '', value: 'fa fa-sign-in', ariaLabel: 'Sign in arrow' },
{ label: '', value: 'fa fa-sign-language', ariaLabel: 'Sign language' },
{ label: '', value: 'fa fa-sign-out', ariaLabel: 'Sign out arrow' },
{ label: '', value: 'fa fa-signal', ariaLabel: 'Signal bars' },
{ label: '', value: 'fa fa-simplybuilt', ariaLabel: 'Simply Built logo' },
{ label: '', value: 'fa fa-sitemap', ariaLabel: 'Sitemap' },
{ label: '', value: 'fa fa-skyatlas', ariaLabel: 'Sky Atlas logo' },
{ label: '', value: 'fa fa-skype', ariaLabel: 'Skype logo' },
{ label: '', value: 'fa fa-slack', ariaLabel: 'Slack logo' },
{ label: '', value: 'fa fa-sliders', ariaLabel: 'Sliders' },
{ label: '', value: 'fa fa-slideshare', ariaLabel: 'Slideshare logo' },
{ label: '', value: 'fa fa-snapchat', ariaLabel: 'Snapchat logo' },
{ label: '', value: 'fa fa-snapchat-ghost', ariaLabel: 'Snapchat ghost logo' },
{ label: '', value: 'fa fa-snapchat-square', ariaLabel: 'Snapchat logo in square' },
{ label: '', value: 'fa fa-snowflake-o', ariaLabel: 'Snowflake' },
{ label: '', value: 'fa fa-sort', ariaLabel: 'Sort up and down arrows' },
{ label: '', value: 'fa fa-sort-alpha-asc', ariaLabel: 'Sort A to Z' },
{ label: '', value: 'fa fa-sort-alpha-desc', ariaLabel: 'Sort Z to A' },
{ label: '', value: 'fa fa-sort-amount-asc', ariaLabel: 'Sort amount ascending' },
{ label: '', value: 'fa fa-sort-amount-desc', ariaLabel: 'Sort amount descending' },
{ label: '', value: 'fa fa-sort-asc', ariaLabel: 'Sort up' },
{ label: '', value: 'fa fa-sort-desc', ariaLabel: 'Sort down' },
{ label: '', value: 'fa fa-sort-numeric-asc', ariaLabel: 'Sort numeric ascending' },
{ label: '', value: 'fa fa-sort-numeric-desc', ariaLabel: 'Sort numeric descending' },
{ label: '', value: 'fa fa-soundcloud', ariaLabel: 'SoundCloud logo' },
{ label: '', value: 'fa fa-space-shuttle', ariaLabel: 'Space shuttle' },
{ label: '', value: 'fa fa-spinner', ariaLabel: 'Spinner' },
{ label: '', value: 'fa fa-spoon', ariaLabel: 'Spoon' },
{ label: '', value: 'fa fa-spotify', ariaLabel: 'Spotify logo' },
{ label: '', value: 'fa fa-square', ariaLabel: 'Square with rounded corners' },
{ label: '', value: 'fa fa-square-o', ariaLabel: 'Square with rounded corners outline' },
{ label: '', value: 'fa fa-stack-exchange', ariaLabel: 'Stack Exchange logo' },
{ label: '', value: 'fa fa-stack-overflow', ariaLabel: 'Stack overflow logo' },
{ label: '', value: 'fa fa-star', ariaLabel: 'Star' },
{ label: '', value: 'fa fa-star-half', ariaLabel: 'Half star' },
{ label: '', value: 'fa fa-star-half-o', ariaLabel: 'Half star outline' },
{ label: '', value: 'fa fa-star-o', ariaLabel: 'Star outline' },
{ label: '', value: 'fa fa-steam', ariaLabel: 'Steam logo' },
{ label: '', value: 'fa fa-steam-square', ariaLabel: 'Steam logo in square' },
{ label: '', value: 'fa fa-step-backward', ariaLabel: 'Step backward arrow' },
{ label: '', value: 'fa fa-step-forward', ariaLabel: 'Step forward arrow' },
{ label: '', value: 'fa fa-stethoscope', ariaLabel: 'Stethoscope' },
{ label: '', value: 'fa fa-sticky-note', ariaLabel: 'Sticky note' },
{ label: '', value: 'fa fa-sticky-note-o', ariaLabel: 'Sticky note outline' },
{ label: '', value: 'fa fa-stop', ariaLabel: 'Stop square' },
{ label: '', value: 'fa fa-stop-circle', ariaLabel: 'Stop square in circle' },
{ label: '', value: 'fa fa-stop-circle-o', ariaLabel: 'Stop square in circle outline' },
{ label: '', value: 'fa fa-street-view', ariaLabel: 'Street view person' },
{ label: '', value: 'fa fa-strikethrough', ariaLabel: 'Strikethrough' },
{ label: '', value: 'fa fa-stumbleupon', ariaLabel: 'Stumble Upon logo' },
{ label: '', value: 'fa fa-stumbleupon-circle', ariaLabel: 'Stumble Upon logo in circle' },
{ label: '', value: 'fa fa-subscript', ariaLabel: 'Subscript' },
{ label: '', value: 'fa fa-subway', ariaLabel: 'Subway' },
{ label: '', value: 'fa fa-suitcase', ariaLabel: 'Suitcase' },
{ label: '', value: 'fa fa-sun-o', ariaLabel: 'Sun outline' },
{ label: '', value: 'fa fa-superpowers', ariaLabel: 'Superpowers logo' },
{ label: '', value: 'fa fa-superscript', ariaLabel: 'Superscript' },
{ label: '', value: 'fa fa-table', ariaLabel: 'Table' },
{ label: '', value: 'fa fa-tablet', ariaLabel: 'Tablet' },
{ label: '', value: 'fa fa-tachometer', ariaLabel: 'Tachometer' },
{ label: '', value: 'fa fa-tag', ariaLabel: 'Tag' },
{ label: '', value: 'fa fa-tags', ariaLabel: 'Tags' },
{ label: '', value: 'fa fa-tasks', ariaLabel: 'Task list progress bars' },
{ label: '', value: 'fa fa-taxi', ariaLabel: 'Taxi' },
{ label: '', value: 'fa fa-telegram', ariaLabel: 'Telegram logo' },
{ label: '', value: 'fa fa-television', ariaLabel: 'Television' },
{ label: '', value: 'fa fa-tencent-weibo', ariaLabel: 'Tencent Weibo logo' },
{ label: '', value: 'fa fa-terminal', ariaLabel: 'Terminal cursor' },
{ label: '', value: 'fa fa-text-height', ariaLabel: 'Text height' },
{ label: '', value: 'fa fa-text-width', ariaLabel: 'Text width' },
{ label: '', value: 'fa fa-th', ariaLabel: 'Table heading' },
{ label: '', value: 'fa fa-th-large', ariaLabel: 'Table heading large' },
{ label: '', value: 'fa fa-th-list', ariaLabel: 'Table heading list' },
{ label: '', value: 'fa fa-themeisle', ariaLabel: 'ThemeIsle logo' },
{ label: '', value: 'fa fa-thermometer-empty', ariaLabel: 'Thermometer empty' },
{ label: '', value: 'fa fa-thermometer-full', ariaLabel: 'Thermometer full' },
{ label: '', value: 'fa fa-thermometer-half', ariaLabel: 'Thermometer half full' },
{ label: '', value: 'fa fa-thermometer-quarter', ariaLabel: 'Thermometer one quarter full' },
{ label: '', value: 'fa fa-thermometer-three-quarters', ariaLabel: 'Thermometer three quarters full' },
{ label: '', value: 'fa fa-thumb-tack', ariaLabel: 'Thumbtack' },
{ label: '', value: 'fa fa-thumbs-down', ariaLabel: 'Thumb down' },
{ label: '', value: 'fa fa-thumbs-up', ariaLabel: 'Thumb up' },
{ label: '', value: 'fa fa-thumbs-o-down', ariaLabel: 'Thumb down outline' },
{ label: '', value: 'fa fa-thumbs-o-up', ariaLabel: 'Thumb up outline' },
{ label: '', value: 'fa fa-ticket', ariaLabel: 'Ticket stub' },
{ label: '', value: 'fa fa-times', ariaLabel: 'Times x' },
{ label: '', value: 'fa fa-times-circle', ariaLabel: 'Times x in circle' },
{ label: '', value: 'fa fa-times-circle-o', ariaLabel: 'Times x in circle outline' },
{ label: '', value: 'fa fa-tint', ariaLabel: 'Tint droplet' },
{ label: '', value: 'fa fa-toggle-off', ariaLabel: 'Toggle off' },
{ label: '', value: 'fa fa-toggle-on', ariaLabel: 'Toggle on' },
{ label: '', value: 'fa fa-trademark', ariaLabel: 'Trademart' },
{ label: '', value: 'fa fa-train', ariaLabel: 'Train' },
{ label: '', value: 'fa fa-trash', ariaLabel: 'Trash can' },
{ label: '', value: 'fa fa-trash-o', ariaLabel: 'Trash can outline' },
{ label: '', value: 'fa fa-tree', ariaLabel: 'Tree' },
{ label: '', value: 'fa fa-trello', ariaLabel: 'Trello logo' },
{ label: '', value: 'fa fa-tripadvisor', ariaLabel: 'TripAdvisor logo' },
{ label: '', value: 'fa fa-trophy', ariaLabel: 'Trophy' },
{ label: '', value: 'fa fa-truck', ariaLabel: 'Truck' },
{ label: '', value: 'fa fa-tty', ariaLabel: 'TTY telephone' },
{ label: '', value: 'fa fa-tumblr', ariaLabel: 'Tumblr logo' },
{ label: '', value: 'fa fa-tumblr-square', ariaLabel: 'Tumbler logo in square' },
{ label: '', value: 'fa fa-twitch', ariaLabel: 'Twitch logo' },
{ label: '', value: 'fa fa-twitter', ariaLabel: 'Twitter logo' },
{ label: '', value: 'fa fa-twitter-square', ariaLabel: 'Twitter square logo' },
{ label: '', value: 'fa fa-umbrella', ariaLabel: 'Umbrella' },
{ label: '', value: 'fa fa-underline', ariaLabel: 'Underline text' },
{ label: '', value: 'fa fa-undo', ariaLabel: 'Undo circular arrow' },
{ label: '', value: 'fa fa-universal-access', ariaLabel: 'Universal Access' },
{ label: '', value: 'fa fa-university', ariaLabel: 'University' },
{ label: '', value: 'fa fa-unlock', ariaLabel: 'Unlocked lock' },
{ label: '', value: 'fa fa-unlock-alt', ariaLabel: 'Unlocked compact lock' },
{ label: '', value: 'fa fa-upload', ariaLabel: 'Upload with up arrow' },
{ label: '', value: 'fa fa-usb', ariaLabel: 'USB logo' },
{ label: '', value: 'fa fa-user', ariaLabel: 'User silhouette' },
{ label: '', value: 'fa fa-user-circle', ariaLabel: 'User silhouette in circle' },
{ label: '', value: 'fa fa-user-circle-o', ariaLabel: 'User silhouette in circle outline' },
{ label: '', value: 'fa fa-user-md', ariaLabel: 'User with stethoscope' },
{ label: '', value: 'fa fa-user-o', ariaLabel: 'User silhouette outline' },
{ label: '', value: 'fa fa-user-plus', ariaLabel: 'User silhouette with plus' },
{ label: '', value: 'fa fa-user-secret', ariaLabel: 'User silhouette with hat and trenchcoat' },
{ label: '', value: 'fa fa-user-times', ariaLabel: 'User silhouette with X' },
{ label: '', value: 'fa fa-users', ariaLabel: 'Three user silhouettes' },
{ label: '', value: 'fa fa-viadeo', ariaLabel: 'Viadeo logo' },
{ label: '', value: 'fa fa-viadeo-square', ariaLabel: 'Viadeo logo in square' },
{ label: '', value: 'fa fa-video-camera', ariaLabel: 'Video camera' },
{ label: '', value: 'fa fa-vimeo', ariaLabel: 'Vimeo logo' },
{ label: '', value: 'fa fa-vimeo-square', ariaLabel: 'Vimeo logo in square' },
{ label: '', value: 'fa fa-vine', ariaLabel: 'Vine' },
{ label: '', value: 'fa fa-vk', ariaLabel: 'VK logo' },
{ label: '', value: 'fa fa-volume-control-phone', ariaLabel: 'Phone with volume control' },
{ label: '', value: 'fa fa-volume-down', ariaLabel: 'Volume down' },
{ label: '', value: 'fa fa-volume-off', ariaLabel: 'Volume off' },
{ label: '', value: 'fa fa-volume-up', ariaLabel: 'Volume up' },
{ label: '', value: 'fa fa-weibo', ariaLabel: 'Weibo logo' },
{ label: '', value: 'fa fa-weixin', ariaLabel: 'Weixin logo' },
{ label: '', value: 'fa fa-whatsapp', ariaLabel: 'Whatsapp logo' },
{ label: '', value: 'fa fa-wheelchair', ariaLabel: 'Wheelchair' },
{ label: '', value: 'fa fa-wheelchair-alt', ariaLabel: 'Wheelchair with user going quickly' },
{ label: '', value: 'fa fa-wifi', ariaLabel: 'Wifi' },
{ label: '', value: 'fa fa-wikipedia-w', ariaLabel: 'Wikipedia logo' },
{ label: '', value: 'fa fa-window-close', ariaLabel: 'Window close' },
{ label: '', value: 'fa fa-window-close-o', ariaLabel: 'Window close outline' },
{ label: '', value: 'fa fa-window-maximize', ariaLabel: 'Window maximize' },
{ label: '', value: 'fa fa-window-minimize', ariaLabel: 'Window minimize' },
{ label: '', value: 'fa fa-window-restore', ariaLabel: 'Window restore' },
{ label: '', value: 'fa fa-windows', ariaLabel: 'Windows logo' },
{ label: '', value: 'fa fa-wordpress', ariaLabel: 'WordPress logo' },
{ label: '', value: 'fa fa-wpbeginner', ariaLabel: 'WP Beginner logo' },
{ label: '', value: 'fa fa-wpexplorer', ariaLabel: 'WP Explorer logo' },
{ label: '', value: 'fa fa-wpforms', ariaLabel: 'WP Forms logo' },
{ label: '', value: 'fa fa-wrench', ariaLabel: 'Wrench' },
{ label: '', value: 'fa fa-xing', ariaLabel: 'Xing logo' },
{ label: '', value: 'fa fa-xing-square', ariaLabel: 'Xing logo in square' },
{ label: '', value: 'fa fa-y-combinator', ariaLabel: 'Y Combinator logo' },
{ label: '', value: 'fa fa-yahoo', ariaLabel: 'Yahoo logo' },
{ label: '', value: 'fa fa-yelp', ariaLabel: 'Yelp logo' },
{ label: '', value: 'fa fa-yoast', ariaLabel: 'Yoast logo' },
{ label: '', value: 'fa fa-youtube', ariaLabel: 'YouTube logo' },
{ label: '', value: 'fa fa-youtube-play', ariaLabel: 'YouTube Play button' },
{ label: '', value: 'fa fa-youtube-square', ariaLabel: 'YouTube logo in square' },
{ label: '', value: 'fa fa-btc', ariaLabel: 'Bitcoin currency' },
{ label: '', value: 'fa fa-eur', ariaLabel: 'Euro currency' },
{ label: '', value: 'fa fa-gbp', ariaLabel: 'Great Britain Pound currency' },
{ label: '', value: 'fa fa-gg', ariaLabel: 'GG currency' },
{ label: '', value: 'fa fa-gg-circle', ariaLabel: 'GG currency in a circle' },
{ label: '', value: 'fa fa-ils', ariaLabel: 'Israeli New Shekel currency' },
{ label: '', value: 'fa fa-inr', ariaLabel: 'Indian Rupee currency' },
{ label: '', value: 'fa fa-jpy', ariaLabel: 'Japanese Yen currency' },
{ label: '', value: 'fa fa-krw', ariaLabel: 'South Korean Won currency' },
{ label: '', value: 'fa fa-rub', ariaLabel: 'Russian Ruble currency' },
{ label: '', value: 'fa fa-try', ariaLabel: 'Turkish Lira currency' },
{ label: '', value: 'fa fa-usd', ariaLabel: 'US Dollar currency' },
{ label: '', value: 'fa fa-viacoin', ariaLabel: 'Viacoin currency' }
];
export default dropdownOptions;

The fun part about this one is that you have to set each icon’s Unicode character as the label. If your computer parses this code like mine, all you should see in the labels here is a little rectangle. But trust that this will eventually make the icons themselves show up in the dropdown.

Building the icon heading block

With helper files out of the way, here’s the code behind the block. It includes the Font Awesome 4.7 dropdown, a heading field, a level setting so the user can choose whether it’s a <h2> or some other level, and support for inner blocks. You could drop the inner blocks or repurpose this as needed; this just helps our authors keep content grouped and makes it easier to adjust the order of the blocks on a page.

Basically, up at the top we pull in lots of external code. You’re probably very familiar with registerBlockType, Dashicon, TextControl, those sorts of things. You may also be familiar with PanelBody and InspectorControls, which are used to add settings to the Inspector Panel (sidebar) on the right side of the screen. In this block, those are used to allow authors to set the heading level. We also pull in the custom SelectControl and dropdownOptions, which we’ll fuse together to create the actual icon picker.

const registerBlockType = wp.blocks.registerBlockType;
const { Dashicon, PanelBody, RadioControl, TextControl } = wp.components;
const { InnerBlocks, InspectorControls, RichText } = wp.editor;
import SelectControl from './custom-select-control'; // Custom select control enables "aria-label" for individual options
import { withState } from '@wordpress/compose'; // required for custom select control
import dropdownOptions from './font-awesome-icons'; // All Font Awesome 4.7 icons (except Google+) as dropdown options

registerBlockType("stmu/icon-heading", {
    title: 'Icon Heading',
    icon: 'lightbulb',
    category: 'common',
    attributes: {
        icon: {
            type: 'string',
            default: 'fa fa-flag',
            source: 'attribute',
            selector: 'i',
            attribute: 'class'
        },
        heading: {
            type: 'string',
            source: 'text',
            selector: 'h2',
            default: 'Heading'
        },
        level: {
            type: 'string',
            default: 'h2',
            selector: 'ihtHeading'
        }
    },
    edit: props => {
        const { attributes: { icon, heading, level }, className, setAttributes } = props;
        return (
            <div className="ihtEditor">
                <InspectorControls>
                    <PanelBody title="Heading options">
                        <RadioControl
                            label="Heading level"
                            selected={ level }
                            options={[
                                { label: 'h2', value: 'h2' },
                                { label: 'h3', value: 'h3' },
                                { label: 'h4', value: 'h4' }
                            ]}
                            onChange={ ( level ) => { setAttributes( { level } ) } }
                        />
                    </PanelBody>
                </InspectorControls>
                <SelectControl
                    label="Icon"
                    hideLabelFromVision="true"
                    className="iconSelecter"
                    value={ icon }
                    onChange={ ( icon ) => { setAttributes( { icon } ) } }
                    options={ dropdownOptions }
                />
                <RichText
                    tagName={ level }
                    value={ heading }
                    onChange={ ( heading ) => { setAttributes( { heading } ) } }
                    placeholder={ 'Heading' }
                    formattingControls={ [] } // This removes bold, italic, strikethrough, and link options for the heading
                />
                <InnerBlocks
                />
            </div>
        );
    },
    save: props => {
        const { attributes: { icon, heading, level }, className, setAttributes } = props;
        const HeadingTag = `${ level }`;
        return (
            <div>
                <HeadingTag className="ihtHeading">
                    <RichText.Content
                        tagName="i"
                        className={ icon }
                    />{ heading }
                </HeadingTag>
                <InnerBlocks.Content />
            </div>
        );
    }
});

You could tweak any number of things – say, add h5 and h6 options for headings, remove the Inner Blocks to keep this more of a self-contained “icon and heading only” block, re-enable the formatting controls so authors can make part of the heading bold.

I’d love to know if anyone has a better way of including the Font Awesome icons, or maybe not overriding the Core SelectControl. I’m still learning about block development and React, and I value honest critiques of my code and suggestions to make things better.

But before we get into JS refactoring, let’s make sure to style that dropdown so people actually see Font Awesome.

Styling it all

Most of our styles make the various fields line up in the Editor, but one very important style is enforcing the font on our custom dropdown menu. Without FontAwesome, users on both the front end and the back end are going to see those weird rectangles instead of our beautiful icons.

/src/editor.scss

.ihtEditor {
    display:-ms-grid;
    -ms-grid-rows:auto auto; -ms-grid-columns:54px 1fr;
    display:grid;
    grid-template-rows:auto auto; grid-template-columns:54px 1fr;
}
.ihtEditor > .iconSelecter { -ms-grid-row:1; -ms-grid-column:1; grid-row:1; grid-column:1; margin-top:3px; }
    .iconSelecter select { width:80%; font-family:Arial, FontAwesome; }
.ihtEditor > .editor-rich-text { -ms-grid-row:1; -ms-grid-column:2; grid-row:1; grid-column:2; }
.ihtEditor > .editor-inner-blocks { -ms-grid-row:2; -ms-grid-column:1; -ms-grid-column-span:2; grid-row:2; grid-column:1/span 2; }
.ihtEditor .editor-block-list__layout > .editor-block-list__block > .editor-block-list__block-edit { margin-top:1em; margin-bottom:0; }

/src/front.scss

.wp-block-stmu-icon-heading h2, .wp-block-stmu-icon-heading h3, .wp-block-stmu-icon-heading h4 {
    margin:0; padding:.5em 0; font-size:1.25em;
}
.wp-block-stmu-icon-heading i { margin-right:.4em; }

Leave a Reply

Your email address will not be published. Required fields are marked *