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

最新推荐文章于 2024-07-05 09:52:23 发布

ROTBLATT

最新推荐文章于 2024-07-05 09:52:23 发布

阅读量957

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/rotblatt/article/details/48250053

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为图标文件数量多，文件小，能将相关图标继承到单一图标文件里，指定图标位置，让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>

结果显示