字体图标从下载到使用

字体图标的使用越来越频繁，可谓前端必备技能

一，字体图标在哪找

   https://icomoon.io/#home

首推icomoon，一个国外网站，丰富的免费字体图标，选中即可打包下载

二，字体图标怎么用（含兼容问题）两种方式

先引入字体图标文件，引用的时候注意路径

font+html 兼容低版本的浏览器

<ul>
    <li class="icon"></li>
    <li class="icon"></li>
    <li class="icon"></li>
    <li class="icon"></li>
    <li class="icon"></li>
    <li class="icon"></li>
    <li class="icon"></li>


</ul>

@font-face {
    font-family: icomoon;
    src:url(../fonts/icomoon.eot); /* ie9*/
    src: url(../fonts/icomoon.eot?#iefix) format('embedded-opentype'), /* ie6~8*/
    url(../fonts/icomoon.woff) format('woff'),
    url(../fonts/icomoon.ttf) format('truetype'),
    url(../fonts/icomoon.svg) format('svg');
    font-weight:normal;
    font-style: normal;

}
.icon {
    list-style: none;
    font-family: icomoon;
    font-weight: normal;
    font-style:normal;
    color: blue;
    font-size:18px;
}

font+css 借助伪元素 不兼容低版本浏览器  最低兼容到ie7

<ul>
    <li class="icon icon01"></li>
    <li class="icon icon02"></li>
    <li class="icon icon03"></li>
    <li class="icon icon04"></li>
</ul>

@font-face {
    font-family: icomoon;
    src: url(../fonts/icomoon.eot); /* ie9*/
    src: url(../fonts/icomoon.eot?#iefix) format('embedded-opentype'), /* ie6~8*/ url(../fonts/icomoon.woff) format('woff'),
    url(../fonts/icomoon.ttf) format('truetype'),
    url(../fonts/icomoon.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}

.icon {
    list-style: none;
    font-family: icomoon;
    font-weight: normal;
    font-style: normal;
    color: blue;
    font-size: 18px;
}

.icon01:before {
    content: '\e90f';
}

.icon02:before {
    content: '\e911';
}

.icon03:before {
    content: '\e912';
}

.icon04:before {
    content: '\e913';
}