Dashicons and Pseudo :before

1 Views

I am generating a custom post type that uses the dashicons and allows users to select one to associate with the post. The idea being the user can select an icon from a drop down list and it is displayed to the right.

I have run into an issue though as javascript can’t change the :before { content: 'f188';} value directly so I had planned on using a data-attr (data-icon) on the element then using :before { content: attr(data-icon);}.

Read More

This works and replaces the content with the necessary icon code but for some reason renders it as text rather than an icon. Switching back to just using the text (rather than the data attr) in the css works.

HTML: 

<select name="_mo_content_menu_ico" id="_mo_content_menu_ico">
    <option value="f118">Education</option>
    <option value="f130">Status</option>...
    ...<option value="f161">Gallery</option>
</select>
<span id="content_icon" data-icon="f118"></span>

CSS: 

#content_icon:before {
content: attr(data-icon);
font: 400 20px/1 dashicons!important;
speak: none;
color: #333;
padding: 8px 0;
height: 36px;
width: 20px;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

JS: 

var $j = jQuery;
$j(document).ready(function(){
    $j('#_mo_content_menu_ico').change(function(){
        var icon = $j('#_mo_content_menu_ico').val();
        $j('#content_icon').attr('data-icon',icon);
    });
});

Any idea how to get round this? Or even why it’s happening?

Thanks,

Post Views: 1

Related posts

1 comment

  1. 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:
    https://developer.wordpress.org/resource/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);

Comments are closed.