To integrate ionicons into own project

0 votes
added Oct 13, 2017 in CSS by anonymous
  1. Download font icons at
  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;
    } - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.