“Blank square” dashicons on front end

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