                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /用字体在网页中画ICON图标

不兼容所有ie浏览器

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>IcoMoon Demo</title>
	<meta name="description" content="An Icon Font Generated By IcoMoon.io">
	<meta name="viewport" content="width=device-width">
   <link rel="stylesheet" type="text/css" href="css/fonthtml.css">
</head>
<body>
	<ul class="list" >
		<li><a href="#"><i class="imooc-icon">&#xe608</i></a></li>
		<li><a href="#"><i class="imooc-icon">&#xe60c</i></a></li>
		<li><a href="#"><i class="imooc-icon">&#xe60b</i></a></li>
		<li><a href="#"><i class="imooc-icon">&#xe609</i></a></li>
		<li><a href="#"><i class="imooc-icon">&#xe60d</i></a></li>
		<li><a href="#"><i class="imooc-icon">&#xe607</i></a></li>
		<li><a href="#"><i class="imooc-icon">&#xe606</i></a></li>
		<li><a href="#"><i class="imooc-icon">&#xe600</i></a></li>
		<li><a href="#"><i class="imooc-icon">&#xe601</i></a></li>
		<li><a href="#"><i class="imooc-icon">&#xe602</i></a></li>
	</ul>

</body>
</html>
<style type="text/css">

@font-face {
	font-family: "imooc-icon";
	src:url("../fonts/icomoon.eot"); /*IE9 兼容模式*/
	src:url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")
		,url("../fonts/icomoon.woff") format("woff")
		,url("../fonts/icomoon.ttf") format("truetype")
		,url("../fonts/icomoon.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}


.imooc-icon{
	font-family: "imooc-icon";
	font-weight: normal;
	font-variant: normal;
	font-size: 36px;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
  body{ background-color: #e8e8e8;}
    *{ padding: 0; margin: 0; }
	 ul,li{ list-style: none;}
	 i{ font-style: normal; }
     .list{ width: 520px; margin: auto; margin-top:  50px; background-color: #f4f4f4;  }
     .list li { display: inline; float: left;  width: 102px; background-color: #f4f4f4; }
     .list li a{ display: block; margin-left: -1px;   border-left: 1px solid #dddddd; border-top: 1px solid #dddddd; height: 105px; color: #888; text-align: center; line-height: 105px; text-decoration: none;}
     .list li a:hover{ background-color: #fff; color: red; }
    }

</style>