- This topic has 9 replies, 3 voices, and was last updated 3 years, 10 months ago by Tom.
-
AuthorPosts
-
May 18, 2020 at 5:16 am #1289909Keir
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?)
May 18, 2020 at 9:30 am #1290450DavidStaffCustomer SupportHi 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 ?
May 18, 2020 at 1:34 pm #1290778KeirHmm. 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.
May 18, 2020 at 4:35 pm #1290941TomLead DeveloperLead DeveloperHi there,
I’m not seeing them, either. Can you disable your caching/HTML minifying plugin so I can look through the source?
May 19, 2020 at 6:58 am #1291857KeirI 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.
May 19, 2020 at 4:36 pm #1292875TomLead DeveloperLead DeveloperYea, 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' ); } );
May 20, 2020 at 12:50 am #1293262KeirYes, 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.
May 20, 2020 at 10:05 am #1294182TomLead DeveloperLead DeveloperYou 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; }
May 20, 2020 at 11:43 am #1294306KeirThanks guys, that’s fixed it!
It seems so easy now- I’m a bit embarrassed I had to bother you with it.
May 20, 2020 at 2:22 pm #1294485TomLead DeveloperLead DeveloperNo worries! I’m glad we could help 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.