这篇博客探讨了如何使用CSS来创建带有模块化背景、颜色和边框选项的圆形图标。通过示例代码，展示了如何设置图标大小、边框圆角、内边距以及如何在圆形div中居中显示图标，同时提供了不同背景颜色和边框颜色的组合示例。
以下是一个示例,说明如何在具有模块化背景/颜色/边框选项的另一个(圆形)div中显示和定位图标.
请参阅工作片段.
/**CSS FOR THE RING**/
.glyphicon-ring {
width: 60px;
height: 60px;
border-radius: 50%;
border: 4px solid white;
color: white;
display: inline-table;
text-align: center;
}
/**CSS FOR ICON WITH NO BACKGROUND COLOR**/
.glyphicon-ring .glyphicon-bordered {
font-size: 20px;
vertical-align: middle;
display: table-cell;
}
/**WITH AN ADDED BACKGROUND COLOR**/
.glyphicon-white {
background: white;
color: black;
border: 4px solid black;
}
.glyphicon-teal {
background: teal;
color: orange;
}
.glyphicon-red {
background: red;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
