@font-face 
{
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
.icon
{
    font-family: 'MyWebFont' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
}
.icon.ic_home:before 
{
  content: "\e400";
}

<!--ie6、7不支持before和after，所以要使用&#xe400; &#<代码>;不要<>-->
<span class="icon">&#xe404;</span>

图标可以通过https://icomoon.io/app/#/select来制作