0-9 字体图标

最新推荐文章于 2025-06-10 05:58:31 发布

原创最新推荐文章于 2025-06-10 05:58:31 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在HTML文档中加载和使用自定义图标字体，包括设置字体样式、指定字体文件路径及在页面元素中应用图标的具体方法。


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		@font-face {
			/*1. 这个字体名称要注意 icomoon*/
		  font-family: 'icomoon';
		  /*2. 一定要注意路径的问题*/
		  src:  url('fonts/icomoon.eot?7kkyc2');
		  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
		    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
		    url('fonts/icomoon.woff?7kkyc2') format('woff'),
		    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
		  font-weight: normal;
		  font-style: normal;
	}
	span,
	div,
	strong {
		font-family: 'icomoon';
		font-size: 50px;
		color: red;
	}
	</style>
</head>
<body>
	<span>  </span>
	<div>  </div>
	<strong>  </strong>
</body>
</html>