CSS3中的content字符编码，content小的icon图标

最新推荐文章于 2025-05-17 10:50:57 发布

maci_hotesion

最新推荐文章于 2025-05-17 10:50:57 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：我的技术文档我的文章文章标签： css3 html jquery

本文链接：https://blog.youkuaiyun.com/maci_hotesion/article/details/52436674

我的技术文档同时被 2 个专栏收录

14 篇文章

订阅专栏

我的文章

9 篇文章

订阅专栏

这是一个关于CSS3 `content` 属性用于显示图标的方法示例，通过组合不同的字符编码，创建各种小图标。代码示例展示了如何使用JavaScript动态生成包含所有可能组合的CSS规则，并在HTML页面上预览这些图标。此方法适用于前端开发者在编写CSS时寻找特定的字符编码图标。

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

CSS3中的content字符编码，content小的icon图标：本示例是用脚本的方式，将所有的css中content的icon小图标展示出来，有需要的同学，在编写css文件时，可根据情况自行选择对应的content。拷贝下方的代码（需要引入jquery文件）保存为html文件后，浏览器打开就可查看效果。

<html>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<style type="text/css">
span.icon-comm {
	display: inline-block;
	background-color: white;
	border-radius: 2px;
	border: 1px solid #d3d3d3;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin-right: 10px;
	text-align: center;
	vertical-align: bottom;
}
</style>
<body>
</body>
<script type="text/javascript">
(function(arr){
	var style=$('style'), body=$('body'), styleHtml='', bodyHtml='', content='', cssName='';
	for(var i1=0; i1<arr.length; i1++) {
		for(var i2=0; i2<arr.length; i2++) {
			for(var i3=0; i3<arr.length; i3++) {
				for(var i4=0; i4<arr.length; i4++) {
					content = (arr[i1]+arr[i2]+arr[i3]+arr[i4]);
					cssName = 'icon-comm_'+content;
					styleHtml += '.'+cssName +':before{content:"\\'+content+'";}\n';
					bodyHtml += '<span class="icon-comm ' + cssName + '" title="' + cssName + '"></span>\n';
				}
			}
		}
	}
	style.append(styleHtml);
	body.append(bodyHtml);
})(['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'])
</script>
<html>