css - Font Awesome icons disappearing

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

My Font Awesome icon is not showing up in my menu. I reference it

<i class="fa fa-pencil fa-fw"></i> 

and call the referring Stylesheet with

<link rel='stylesheet' id='taptap-fontawesome-css' href='.min.css' type='text/css' media='all' />

in the header.

It seems like the CSS gets applied correctly (width, et cetera) but the Icon itself is missing. I don't know what else to try so if anyone of you has an idea it is highly appreciated.

Cheers

Michael

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

My Font Awesome icon is not showing up in my menu. I reference it

<i class="fa fa-pencil fa-fw"></i> 

and call the referring Stylesheet with

<link rel='stylesheet' id='taptap-fontawesome-css' href='http://www.omigretchen.de/wp-content/plugins/taptap-by-bonfire/fonts/font-awesome/css/font-awesome.min.css' type='text/css' media='all' />

in the header.

It seems like the CSS gets applied correctly (width, et cetera) but the Icon itself is missing. I don't know what else to try so if anyone of you has an idea it is highly appreciated.

Cheers

Michael

• css

Share Improve this question edited Nov 2, 2018 at 21:36 Johansson 15.4k1111 gold badges4444 silver badges8080 bronze badges asked Nov 2, 2018 at 19:07 Michael SchwarkMichael Schwark 11311 silver badge55 bronze badges 12

• On which pages do you use the icons? – Remzi Cavdar Commented Nov 2, 2018 at 19:11
• Hi Remzi! I use it only on www.omigretchen.de. It is one Icon in one of the main menu links. I studied the code a lot of times, but can't figure it out! Seems like only the icons are not loaded! The plug uses 4.7.0 so the code should be correct due to documentation. – Michael Schwark Commented Nov 2, 2018 at 19:13
• It´s in front of the menu link "Cotizar y reservar". – Michael Schwark Commented Nov 2, 2018 at 19:15
• Okay, I will take a look. – Remzi Cavdar Commented Nov 2, 2018 at 19:16
• Txh so much! I owe you big one. If you stumble across anything please let me know! – Michael Schwark Commented Nov 2, 2018 at 19:17

 |  Show 7 more comments

1 Answer 1

Sorted by: Reset to default 0

It seems like that your pencil icon is being overwritten by your theme, see: http://www.omigretchen.de/wp-content/themes/venedor/css/plugins.css

Therefore, use the following code below to restore it:

.fa-pencil:before {
    content: "\f040";
}

Edit: Font Awesome 4.7.0 is highly outdated, as of this post, the latest stable version is Font Awesome 5.5.0

The following code will add Font Awesome 5 to you wp website and this will be placed in the footer.

I recommend you doing this with the Code Snippets plugin or putting this in your child theme's functions.php

function add_footer_styles_font_awesome() {
    wp_enqueue_style('fontawesome5', 'https://use.fontawesome/releases/v5.5.0/css/all.css', array(), null );
};
add_action( 'get_footer', 'add_footer_styles_font_awesome' );

See documentation: https://fontawesome/how-to-use/on-the-web/setup/upgrading-from-version-4