[Resolved] Problems using dashicons in front end of one of my GP sites

Home Forums Support [Resolved] Problems using dashicons in front end of one of my GP sites

Home Forums Support Problems using dashicons in front end of one of my GP sites

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1289909
    Keir

    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?)

    #1290450
    David
    Staff
    Customer Support

    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 ?

    #1290778
    Keir

    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.

    Screenshot showing icons

    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.

    #1290941
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m not seeing them, either. Can you disable your caching/HTML minifying plugin so I can look through the source?

    #1291857
    Keir

    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.

    #1292875
    Tom
    Lead Developer
    Lead Developer

    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' );
    } );
    #1293262
    Keir

    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.

    #1294182
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1294306
    Keir

    Thanks guys, that’s fixed it!

    It seems so easy now- I’m a bit embarrassed I had to bother you with it.

    #1294485
    Tom
    Lead Developer
    Lead Developer

    No worries! I’m glad we could help 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.