Support » Developing with WordPress » “Blank square” dashicons on front end

  • Resolved jennyrigsjo

    (@jennyrigsjo)


    Good afternoon, everyone!

    I’m trying to use dashicons to style a link in the front end of my website. I have the following code in a mu-file:

    // Enable use of dashicons on the front end.
     add_action('wp_enqueue_scripts', 'jr_load_dashicons_front_end');
    
     function jr_load_dashicons_front_end() {
         wp_enqueue_style('dashicons');
     }
    
     // Style the link
     add_action('wp_head', 'jr_style_dev_sign');
    
     function jr_style_dev_sign() {
         ?>
         <style>
         .jr-dev-sign:before {
             content: "\f547"; /*=computer*/
         }
         </style>
         <?php
     }

    The link in question is placed in my theme’s footer file and looks like this:

    <a href='https://example.com' class='jr-dev-sign' >Link text</a>

    Pretty straightforward, right? Unfortunately my WP installation doesn’t think so and displays the dashicon as a blank square. I’ve tried deactivating all plugins and switching to a default WP theme (Twenty Twenty) – same result. I also tried moving the calls to ‘wp_enqueue_scripts’ and ‘wp_head’ to my functions.php file, which made no difference either.

    Since I am not quite an expert in neither WP nor programming in general, I have come here hoping that someone more experienced and with a keener eye than me might point out what I’m doing wrong.

    Any advice is much appreciated. πŸ™‚

    /jenny

Viewing 4 replies - 1 through 4 (of 4 total)
  • Are you able to share the actual link so I could take a look and check what’s actually happening behind the scenes on the page?

    Thread Starter jennyrigsjo

    (@jennyrigsjo)

    Hi George, thanks for helping. πŸ™‚ I have a staging version of the website here:

    https://skrivarverkstan.great-site.net/

    Scroll down to the footer and you’ll find a link with my name (“Jenny RigsjΓΆ”) and a broken dashicon next to it.

    /jenny

    I can’t write enough lines of code to save my own life! But I’ve got time on my hands, and I really, really know how to google πŸ˜€

    And after all my googling, I found you need to define dashicons as your font for this to work. As in…

    .jr-dev-sign:before {
       font-family: dashicons;
       content: "\f547"; /*=computer*/
    }

    Thread Starter jennyrigsjo

    (@jennyrigsjo)

    That did the trick! You sure know your way around google, George. πŸ˜‰ Thank you so much!

    /jenny

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