vvalevv

@phppoet Thank you for the reply. I haven’t mingled with any “role based css js files”, neither do I know how to.

I see in Chrome developer tools that for admin, there is a ‘::before’ element added.

non-admin: https://tinypic.host/image/s1.DXefy4
admin: https://tinypic.host/image/s2.DXePL2

In ‘::before’ element code for admin, I see that image is added. I can add custom CSS and add the images myself, but that wouldn’t be as clean.

UPDATE: I added

.dashicons.dashicons-store::before {
    content: "\f513";
}

to custom CSS, but images are not shown correctly (looks like the image is not found). I saw that the following CSS code is not loaded for non-admin also (while it is loaded on admin role)

.dashicons,.dashicons-before:before {
    font-family: dashicons;
    display: inline-block;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    speak: never;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 20px;
    height: 20px;
    font-size: 20px;
    vertical-align: top;
    text-align: center;
    transition: color .1s ease-in
}

EDIT 2: I found the solution. Apparently dashicons are not loaded for non-admin users. I followed https://stackoverflow.com/questions/50004974/dashicons-in-wordpress-frontend-wont-display and added php code to enable dashicons. Now they work.

• This reply was modified 7 months, 4 weeks ago by vvalevv.
• This reply was modified 7 months, 4 weeks ago by vvalevv.