css盒子制作图标

CSS盒子制作图标是一种非常流行的技术，使用盒子结构可以方便快捷地创建出各种图标样式，本文将介绍如何使用CSS盒子制作图标

/* 创建图标盒子 */
.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ccc;
  text-align: center;
  line-height: 50px;
  font-size: 28px;
  color: #fff;
}
/* 创建不同样式的图标 */
.icon-heart:before {
  content: '\2764';
}
.icon-star:before {
  content: '\2605';
}
.icon-smile:before {
  content: '\1F60A';
}
/* 使用HTML代码创建图标 */
<div class="icon icon-heart"></div>
<div class="icon icon-star"></div>
<div class="icon icon-smile"></div>

以上代码创建了三种不同样式的图标，使用伪类:before添加图标内容，配合CSS样式实现图标的制作
最后使用HTML代码创建图标，将图标盒子作为HTML元素加入到页面中即可