I believe Jetpack is using "Font Awesome" to display social icons. This is the css content: "\f203"; to display facebook for example. If I look in the site source I can't find anywhere the "Font Awesome" being downloaded.

How does this works?

The thing is that I just want to use those icons in my header without making the user download the font again. If I use content: "\f203"; in my style.css the icon doesn't show.

I have Jetpack active and social icons are displayed on each post.


If you don't want to rely on Jetpack for font awesome you need to have the CSS files loaded. Best way (in my opinion) to do this is via the CDN. I use the following:

// Add font awesome & bootstrap
function awesome_css() {
    wp_enqueue_style("fontawesome", 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
    wp_enqueue_style("bootstrap3", 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
add_action( 'wp_enqueue_scripts', 'awesome_css' );

This goes into your functions.php file.

Then you have a few choices of how to add it. You can use the method you've referred to, or you can use the fontawesome cheat sheet

Refer to the examples on fontawesome for more info.

  • Ok, but if I use Jetpack and is active and has already loaded the icons how can I use them? I can't understand how can the icons work for jetpack but not in another place on the site. – Grim Oct 25 '16 at 16:33

Solved: The font in Jetpack is called social-logos and is used like this : font: 400 18px/1 social-logos; content: "\f203";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.