Intel AppFramework create and use your choice of IcoMoon icons

The Intel AppFramework uses a small subset of the IcoMoon icons. This post describes how to make your own selection of IcoMoon icons and use it in your app.

There is a free IcoMoon icon set with 490 icons available that we will use to make our selection from.

1. Open the url https://icomoon.io/app/#/select
   
2. Open the IcoMoon - Free icon set and select the icons you want to use in your app
3. It is also possible to select all icons (we will do that for now)
4. Select the Generate Font option at the bottom
5. Press settings and select Font Name IcoMoon, select as Class Prefix icon. and select the option Encode & Embed Font in CSS
6. Now click the download button
7. Open the downloaded IcoMoon.zip file and copy the file style.cssto your styles folder as customicons.css
8. Open de customicons.css file and compare with the file appframework/build/icons.css (we need to copy over the appframework specific styles)
9. Remove the first four lines with a file-based @font-facedefinition, we will use the embeded one
   

   @font-face {
      font-family: 'IcoMoon';
      src: url('fonts/IcoMoon.eot');
   }
   

10. Replace:
    

    .icon {
       font-family: 'IcoMoon';
       speak: none;
       font-style: normal;
       font-weight: normal;
       font-variant: normal;
       text-transform: none;
       line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
    with (check appframework/build/icons.css for changes):
    

    .icon:before {
       font-family:'IcoMoon';
       speak:none;
       font-style:normal;
       font-weight:normal !important;
       font-variant:normal;
       text-transform:none;
       line-height:1;
       color:inherit;
       position:relative;
       font-size:1em;
       left:-3px; top:2px;
    }
    li .icon:before {
       position:relative;
       width:24px; height:100%;
       top:2px;
       line-height:0 !important;
       margin-right:4px;
    }
    
    .icon.mini:before {
       font-size:.7em;
    }
    .icon.big:before {
       font-size:1.5em;
    }
    

    and we are done! 
    

11. In your main.css file include the appframework css files and your customicons.css file (or include directly in html):
    

    @import url(../appframework/build/af.ui.base.css);
    @import url(../appframework/build/af.ui.css);
    @import url(customicons.css);