Adding Font Awesome to WP Plugin

Question

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.

Answer 1

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?

Answer 2

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.