Split classes inside shortcode with jQuery

Please someone help me to do this .. I want to add FontAwesome shortcode to my theme I have a shortcode that is generated:

add_shortcode( 'fa_icons', function( $atts, $content=null ){
  $atts = shortcode_atts(array(
    'font' => '',
    'size' => ''
    ), $atts);

  extract($atts);

  $icon = $font . ' ' . $size;

  return '<i class="fa ' . $icon . '"></i>';
});

where the $font is array holds the icons

The button function is:

case 'icons' : ?>
<div class="inter"><h5><?php echo $field['id']; ?></h5>
<div class="inner-content"><div class="clearfix"></div>
<div class="active-field icon-option" 
id="<?php echo strtolower(str_replace(' ' , '_' , $field['id'])); ?>" 
name="<?php echo strtolower(str_replace(' ' , '_' , $field['id'])); ?>">
<?php $field_icons = $field['options'];
foreach($field_icons as $index=>$option) { 
echo '<i class="fa fa-'.$option.'"></i>';
} ?>
</div>
<div class="clearfix"></div><span class="description"><?php echo $field['description']; ?></span></div></div>
<?php
break;

The final output is [sh_icon size="icon-large" font="" ][/sh_icon]

I used jQuery to add the shortcodes by adding .active-field class to each active field.

Now the shortcode is works great but it doesn’t echo out the font array.

please help.

Thank you.