字体图标从下载到使用

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

一，字体图标在哪找

   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';
}