Dashicons and Pseudo :before

The dashicons are only part of the WordPress admin area. So if you’re aiming for dashicons in the frontend you’ll have to enqueue the icon font within your function.php:

add_action( 'wp_enqueue_scripts', 'frontend_dashicons' );
function frontend_dashicons() {
    wp_enqueue_style( 'dashicons' );
}

Moreover you’ll not need to remember those cryptic icon values like \f161; simply add the classname of the dashicon.

You can find all dashicons with the according classname here:
http://melchoyce.github.io/dashicons/

(These classnames are part of the dashicons.css which is located via wp-includes/css/dashicons.css)

All this said, you’ll only have to update the value to the classname of the dashicons within your HTML:

<select name="_mo_content_menu_ico" id="_mo_content_menu_ico">
    <option value="dashicons-welcome-learn-more">Education</option>
    <option value="dashicons-format-status">Status</option>
    <option value="dashicons-format-gallery">Gallery</option>
</select>
<span id="content_icon"></span>

And update the JS like this:

var $j = jQuery;
$j(document).ready(function(){
    $j('#_mo_content_menu_ico').change(function(){
        var icon = $j('#_mo_content_menu_ico').val();
        // clear and add selected dashicon class
        $j('#content_icon').removeClass().addClass(icon);
    });
});

And you’ll also have to remove this line within your CSS:

content: attr(data-icon);