1

I'm trying to use font awesome icons for my plugin. I've read this page in the codex and this question.

Here's what I've tried so far:
I've added this on wp-plug-in.php (or should it be somewhere else?)

add_action( 'wp_enqueue_scripts', 'wp_styles' ); 
  function wp_styles() {
      wp_register_style( 'font-awesome', plugins_url( 'wp-plug-in/css/font-awesome.min.css' ) );
      wp_enqueue_style( 'font-awesome' );
  }

I'm hoping I could use it the usual way like:

<i class="fa fa-twitter"></i>

But to no avail. It doesn't display anything at all. I know I'm missing out something and I'm hoping that someone could point it out and probably give me additional resources.
Thank you.

UPDATE

It turned out the theme I had activated didn't have <?php wp_head(); ?> on the header.
Lesson learned. :) Thanks a lot @Robert and @Abhik.

  • 1
    Did you check if font-awesome.min.css being added in website source code? I tried it and it's working fine. If it's being added in head section of website source then check it by adding this <i class="fa fa-twitter" style="color:black;"></i>. Does it show anything? – Robert hue Sep 16 '14 at 5:58
  • No, the css wasn't added in the source code. Do you think it might be a conflict? – HCN Sep 16 '14 at 6:06
  • Posted some instructions below. Please check and confirm if that's what you did? You can also include font awesome CDN URL if you do not want to host them yourself. – Robert hue Sep 16 '14 at 6:12
0

Did you create wp-plug-in/wp-plug-in.php file in plugins folder and added this following code.

<?php
/**
 * Plugin Name: Load FontAwesome
 * Version:     1.0
 */

/* Exit if accessed directly */
if ( ! defined( 'ABSPATH' ) ) exit;

function wp_styles() {
    wp_register_style( 'font-awesome', plugins_url( 'wp-plug-in/css/font-awesome.min.css' ) );
    wp_enqueue_style( 'font-awesome' );
}
add_action( 'wp_enqueue_scripts', 'wp_styles' ); 

And added font awesome css and fonts in wp-plug-in/css folder? And then activate this plugin from admin panel?

Can you not see font-awesome.min.css file in website source code? Search for it?

  • Hey, thanks.. I've checked and double-checked it: wp-plug-in/wp-plug-in.php(yes), code(added), font-awesome contents(added) and the plugin is activated.. Still not in the source code.. – HCN Sep 16 '14 at 6:19
  • Do you have this website online? Where we can see it. Also turn on debugging mode by adding define('WP_DEBUG', true); in wp-config.php to see if there are any errors. – Robert hue Sep 16 '14 at 6:34
  • 1
    I just checked my theme and it turns out <?php wp_head(); ?> is missing. Thank you. – HCN Sep 16 '14 at 6:45
  • Oops... I should have known it. :) well, I am glad you got it working. – Robert hue Sep 16 '14 at 6:47
0

You got to include the fonts too if you are delivering the css from your plugin. Or, just enqueue the font awesome css from their CDN.

add_action( 'wp_enqueue_scripts', 'wp_styles' ); 
function wp_styles() {
    wp_register_style( 'fontawesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css', array(), '4.2.0' );
    wp_enqueue_style( 'fontawesome' );
}

Check the Getting Started guide.

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.