Как использовать иконки FontAwesome в редакторе TinyMCE?

Я пытаюсь добавить кнопку YouTube в редакторе TinyMCE.

Вот файл recent-posts.js, который находится в папке js темы.

(function() {
   tinymce.create('tinymce.plugins.buttons', {
      init : function(ed, url) {

         //для кнопки последних записей
         ed.addButton('recentposts', {
            title : 'Последние записи',
            image : url + '/youtube.png',
            onclick : function() {
               var posts = prompt("Количество записей", "");
               var text = prompt("Заголовок списка", "");

               if (text != null && text != ''){
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]'+text+'[/recent-posts]');
                  else
                     ed.execCommand('mceInsertContent', false, '[recent-posts]'+text+'[/recent-posts]');
               }
               else{
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]');
                  else
                     ed.execCommand('mceInsertContent', false, '[recent-posts]');
               }
            }
         });


         //для YouTube видео
          ed.addButton('youtube', {
            title : 'YouTube',
            text: 'YouTube',          
            onclick : function() {
               var id = prompt("ID видео", "");
               var text = prompt("Заголовок видео", "");

               if (text != null && text != ''){
                  if (id != null && id != '')
                     ed.execCommand('mceInsertContent', false, '[yt id="'+id+'"]'+text+'[/yt]');
               }
               else{
                  if (id != null && id != '')
                     ed.execCommand('mceInsertContent', false, '[yt posts="'+id+'"]');
               }
            }
         });

      },
      createControl : function(n, cm) {
         return null;
      },
      getInfo : function() {
         return {
            longname : "me The Most Brilliant",
            author : 'me',
            authorurl : 'http://www.google.com',
            infourl : 'http://www.google.com',
            version : "1.0"
         };
      }
   });
   tinymce.PluginManager.add('buttons', tinymce.plugins.buttons);
})();

Код в functions.php:

function register_button( $buttons ) {
   array_push( $buttons,"recentposts", "youtube" );
   return $buttons;
}

function add_plugin( $plugin_array ) {
   $plugin_array['buttons'] = get_template_directory_uri() . '/js/recent-posts.js';
   return $plugin_array;
}

function my_recent_posts_button() {

   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
      return;
   }

   if ( get_user_option('rich_editing') == 'true' ) {
      add_filter( 'mce_external_plugins', 'add_plugin' );
      add_filter( 'mce_buttons', 'register_button' );
   }

}

add_action('init', 'my_recent_posts_button');

Вместо image : url+'/youtube.png' я пытаюсь использовать text :'<i class="fa fa-camera-retro"></i>'

Но в текстовом редакторе вместо иконки FontAwesome отображается просто текст как есть. Где нужно разместить файл FontAwesome и как его подключить для использования в TinyMCE?