CSS从图标集里截取某一图标

最新推荐文章于 2021-08-04 08:30:01 发布

原创最新推荐文章于 2021-08-04 08:30:01 发布 · 972 阅读

2 ·

CC 4.0 BY-SA版权

为了优化图标管理，文章介绍了如何将多个图标合并到一个图标文件中，并通过CSS定位来截取和显示所需的特定图标。这种方法使得在网页中使用图标更加便捷，尤其适用于图标数量多且文件小的情况。

因为图标文件数量多，文件小，能将相关图标继承到单一图标文件里，指定图标位置，让CSS从图集里截取出来，这能大大方便图标的管理

本图标集每个图标宽度16px，高度17px

CSS语句

.iconset{
	background: url(images/IconPageTools.png) no-repeat;
	width: 16px;
	line-height: 17px;
	display: inline-block;
}

.icon_facebook{
	background-position: 0px 0px;
}

.icon_youtube{
	background-position: 0px -102px;
}

html使用示例

<body>
	<p>facebook icon below</p>
	<form id="form1">
		<div class="iconset icon_facebook">
			 
		</div>
	</form>	

	<p>youtube icon below</p>
	<form id="form1">
		<div class="iconset icon_youtube">
			 
		</div>
	</form>	

</body>
</html>

结果显示