Archived topic
Problems using dashicons in front end of one of my GP sites
9 replies · Started by Keir on May 18, 2020
I have two main websites using GP (and I love it).
In both I use snippets to add bits of php, including dashicons with this snippet:
add_action( ‘wp_enqueue_scripts’, ‘load_dashicons_front_end’ );
function load_dashicons_front_end() {
wp_enqueue_style( ‘dashicons’ );
}
This works perfectly on one of my sites, but not on the other, where it only displays dashicons correctly when using the html insert (<span class="dashicons dashicons-email"></span>) but not using the css technique, (content: "\f465";) - ref: https://developer.wordpress.org/resource/dashicons/#email
You can see this at end of my contact page (URL below) which ends with the correct html email icon using the html method, but the css one that follows is incorrect (appearing as a kind of hamburger icon from a different character set altogether?)
Hi there,
i am not seeing the correct dashicon being displayed - it looks like dashicons hasn't been enqueued - have you checked to see if they are being disabled by another plugin ?
Hmm. Here is the page where I have the dashicons (at the end of the message under the contact form) as stated there is one icon displaying correctly (email letter) But the other not (it should be identical)
https://herbidacious.calamus.graphics/contact/
I can see them. Perhaps you overlooked them?
The first displays correctly, the second not. Here’s a screenshot.
I’ve tried deactivating most plugins (although not GP premium or Jetpack - it’s a live site!) but as you can see, dashicons must be enqueued as it is displaying via html method.
Hi there,
I'm not seeing them, either. Can you disable your caching/HTML minifying plugin so I can look through the source?
I disabled the SiteGround plugin, but they were both still there.
Then I thought to view the page in a private browser tab (I.e. not logged in to Wordpress) and only the second (and incorrect) icon is now visible (six horizontal bars) which is coming from :before content ‘/f465’ - is that coming from GP icons? I notice it will display certain special character glyphs with certain values.
I assume it was loading the dash-icon for the html (<span class="dashicons dashicons-email"></span>) via the wp admin bar.
That explains why I was getting different results. Still not sure why the dashicons are not enqueuing though.
Yea, I'm not seeing Dashicons in your source at all.
Can you make sure your function doesn't have any curly quotes?:
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'dashicons' );
} );Yes, there were curly quotes. I've fixed that. (and learned to look out for that in the future - thank you!)
Now I can see the dashicon in the private browser, still followed by the incorrect one.
You need to tell your pseudo selector which font-family to use:
#post-4752 > div > div.entry-content > p:nth-child(2):after {
content: "\f542";
font-family: dashicons;
}Thanks guys, that’s fixed it!
It seems so easy now- I’m a bit embarrassed I had to bother you with it.
No worries! I'm glad we could help :)
