Drupal 7 - Rendering Exposed Form Elements as Icons via Custom Module, outputting string instead of html

Question

I have a custom module with some simple code:

function theme_extras_form_alter(&$form, &$form_state, $form_id) {
   if ($form['#id'] == 'views-exposed-form-blog-posts-page') {
      $form['field_post_type_tid']['#options']['All'] = t('Refresh');
      $form['field_post_type_tid']['#options']['3'] = t('<i class="icon-twitter"></i>');
   }
}

The first replacement works beautifully, but the second renders as plain text, rather than html. I need to do this for every form element (in fact, refresh will even be replaced with an icon further down the road). What am I missing here to properly output the html?

Answer 1

I decided to pull this off using jQuery, as achieving the desired affect using a custom module was not pragmatic and may have, in fact, been overkill. Following is the poorly refactored but working code which got me there:

(function($) {

$(document).ready(function(){

    var link = '<a href="http://project.local/blog-posts?field_blog_post_type_tid=',
        id   = '#edit-field-blog-post-type-tid-';

    $(id + 'all').html(link + 'All"><span class="icon-container"><i class="icon-undo"></i></span></a>');
    $(id + '3').html(link + '3"><span class="icon-container"><i class="icon-music"></i></span></a>');
    $(id + '2').html(link + '2"><span class="icon-container"><i class="icon-camera"></i></span></a>');
    $(id + '5').html(link + '4"><span class="icon-container"><i class="icon-quote-right"></i></span></a>');
    $(id + '1').html(link + '1"><span class="icon-container"><i class="icon-file-text-alt"></i></span></a>');
    $(id + '4').html(link + '4"><span class="icon-container"><i class="icon-film"></i></span></a>');
});

})(jQuery);