                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /用字體在網(wǎng)頁中畫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>