Font awesome icons as options of a select field

The CMS Questions
13

I think I’ve got it.

I extended the select field, as per these instructions.

Created its assets folder, and added a style.css file, and font awesome css to the css folder + font awesome fonts to the fonts folder.

I then linked both css files as assets to the extended field. This is the full php field file:

<?php

class selectawField extends SelectField {
	static public $assets = array(
		'css' => array(
			'font-awesome.min.css',
            'style.css',
	    )
	);			
}

Then, in style.css, more or less followig advice from this SO answer I gave fontawesome to the ‘option’ element /edit and also to the ‘select’ element’ edit/ as such:

select, option {
	font-family: 'FontAwesome';
	font-style: normal;
}

Now, adding something like this to a blueprint, does actually show the icon in the dropdown select menu on the panel /edit and also on the select menu once it drops back up edit/ :smiley: at least on chrome

icon:
  label:  icon
  type:   selectaw
  options:
    '&#xf270;': '&#xf270;' 
    '&#xf0f9;': '&#xf0f9;'

How about this solution?

Thank you!

/edit, just por completeness, alhough it works this solution seems to create a console warning regarding the path from the FA css to the FA fonts ; I moved the issue to a different question for clarity here, edit/