我有一个 fa-circle-thin
,我想在其中放置一个字形图标,这样看起来我的字形图标周围有一个圆形边框。我只想知道这是否可能?
我试过以下方法:
<div class="col-md-4">
<span class="circle">
<i class="glyphicon glyphicon-star"></i>
</span>
<h4 class="service-heading">Lorem</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
但是这两个图标并排显示。我为我的 FA 创建了一个类,如下所示:
.circle:before {
font-family: fontawesome-webfont;
text-decoration: none;
content: "\f1db";
background-color: transparent;
z-index:-1;
}
最佳答案
我只是使用 border-radius: 50%
而不是尝试定位两个字形(而且您可以设置边框样式!)。我还使用 text-align: center
并通过匹配 line-height
和 height
值来居中:
.circle {
border: 1px solid black;
border-radius: 50%;
padding: 3px;
width: 25px;
height: 25px;
display: inline-block;
text-align: center;
line-height: 25px;
}
.alt {
border-width: 2px;
border-color: red;
color: red;
width: 15px;
height: 15px;
line-height: 15px;
}
<div class="circle">
🌟
</div>
<div class="circle alt">
🌟
</div>
关于css - 带有 Font Awesome 的堆叠字形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35814783/