字体图标从下载到使用

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

一，字体图标在哪找

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