To integrate ionicons into own project

Question

1. Download font icons at http://ionicons.com/
2. Extract the zip file
3. Get only a few files from extracted folder.
4. Example: copy ionicons.eot, .svg, .ttf, .woff into your project font folder. e.g fonts/ionicons.eot
5. Copy .css file into your project css folder . e.g css/fonts/onicons.css
6. Edit the path of font source. Open and Edit ionicons.css fonts source according to your project path. e.g @font-face { font-family: "Ionicons"; src: url("/sites/all/themes/zing/fonts/ionicons/ionicons.eot?v=2.0.0");
7. Since you may have more than one fonticons in your project i.e fontawesome, icomoon, etc, you may need to add parent class to specify ionicons classes.
8. .  Example: <li class="fa fa-bars">use fontawesome</li>
            <li class="ion ion-close-empty">use ionicons</li>​
9. Personally, there's 2 method in using fonticons. 1) Direct class <span class="ion ion-close-empty"> 2) &:before
10. &:before: 

    @mixin icon-fa {
      font-family: FontAwesome;
      font-weight: normal;
      content: "";
      margin-right: 6px;
      color: $grey_dark;
      font-size: large; 
    }

    @mixin icon-ion {
      font-family: "Ionicons";
      content: "";
      margin-right: 6px;
      font-size: xx-large;
      color: $grey_dark;
    }