0

Good day,

I've setup a WordPress website and selected a theme (Metrolo) plus WooCommerce. The menu items should have a down arrow (\f0d7) I think this is set by the theme. The arrow is not showing, only an empty box.

I inspect the css and see this:

.sf-menu.sf-arrows .sf-with-ul:after {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    speak: none;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    content: "\f0d7";
    float: right;
    margin-left: 5px;
}

What I've read so far is that it doesn't seem to be the Theme or WordPress but an hosting issue.

The only access I have to the back-end of the site is via a cpanel.

TungstenX
  • 830
  • 3
  • 19
  • 40
  • Related: https://stackoverflow.com/questions/10393462/placing-unicode-character-in-css-content-value – Jonathon Reinhart Jun 12 '18 at 14:40
  • Sounds like font awesome might not be enqueued - if you view the page source, can you see the fontawesome stylesheet loaded anywhere? – Frits Jun 12 '18 at 14:48
  • @JonathonReinhart Not related, I'm not going to hack a theme - all changes will be lost if I update the theme. It works on other website, so adding addition css to override is a workaround – TungstenX Jun 13 '18 at 07:15
  • @Frits no it's not there. I thought the theme would have done that – TungstenX Jun 13 '18 at 07:20
  • 1
    @TungstenX yeah, a couple of websites specifically don't use font-awesome, so it's generally in the theme creators' best interest to not enqueue it unless the theme specifically needs it. Most themes however do use it when generating social media links... I've added an answer explaining how you can enqueue it yourself :) Good luck! – Frits Jun 13 '18 at 08:10

1 Answers1

1

Based on our comments, it seems that the font-awesome stylesheet has not been enqueued on your website.

You can easily rectify this by enqueuing it yourself either through the theme files, or a custom plugin:

Enqueuing through your theme files:

Add the following lines in your functions.php file:

add_action( 'wp_enqueue_scripts', 'so_my_custom_scripts' );
function so_my_custom_scripts() {
    wp_enqueue_style( 'llt-google-fonts', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css?ver=4.9.6' );
}

Enqueuing through a custom plugin:

If you don't have access to your functions.php file, or you aren't using a child theme and are not willing to risk adding this in your main theme, you could always add your own plugin to enqueue it for you.

Add the following to code to a blank php file named mcfae.php inside a folder named mcfae and upload that folder to your plugin directory via ftp, or zip the folder and upload from within the plugin dashboard.

<?
/*
Plugin Name: My Custom Font Awesome Enqueuer
Plugin URI: https://stackoverflow.com/a/50832019/6049581
Description: Ensures that Font Awesome is enqueued.
Version: 1.0.0
Text Domain: mcfae
Author: TungstenX
Author URI: https://stackoverflow.com/a/50832019/6049581
*/
add_action( 'wp_enqueue_scripts', 'mcfae_enqueue_scripts' );
function mcfae_enqueue_scripts() {
    wp_enqueue_style( 'llt-google-fonts', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css?ver=4.9.6' );
}
Frits
  • 7,341
  • 10
  • 42
  • 60
  • 1
    Thank you @Frits, such an elegant solution. I opted for the second one. Had done the first approach on another website, update the theme and had to try and remember what the changes to functions.php I made. – TungstenX Jun 13 '18 at 19:48
  • 1
    Awesome @TungstenX :) Happy to help :) If you ever need to make changes to a theme file again and are worried about theme updates over writing your work, have a look into setting up [child themes.](https://codex.wordpress.org/Child_Themes) It's essentially a decent way of adding additional files that get loaded along side your theme (like a secondary functions.php file) that won't get touched during updates and such! Cheers :) – Frits Jun 13 '18 at 19:51