带有数字和阴影的字体 - 令人敬畏的圆圈

Question

如何使用font awesome创建一个带有边框和阴影的数字的圆圈？我发现一个带有数字和边框的圆圈的典型答案会产生方形阴影而不是圆形阴影（至少我正在尝试这样做）。

我找到了一个创建带阴影圆圈的解决方案，但它不适用于＃。它产生的是椭圆形，而不是圆形。

placeList.ItemClick += PlaceList_ItemClick;
private void PlaceList_ItemClick(object sender, ItemClickEventArgs e)
{
       Console.WriteLine("item clicked ");
       CommonUtils.showToast(this,"Item clicked");
}

#blah {
  box-shadow: 0 1px 10px rgba(255, 0, 0, 0.46);
}

.icon-wrapper {
  display: inline-block;
}

.page-number-core {
  border: 3px solid #fff;
  padding: 10px;
  -webkit-border-radius: 1100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  box-shadow: 0 1px 10px rgba(255, 0, 0, 0.46);
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.fix-editor {
  display: none;
}

.bold {
  font-weight: bold;
}

Answer 1

GCyrillus是正确的。为了使容器成为圆形，需要固定的宽度和高度。由于你只是在寻找一个数字，fontawesome与此无关。这是一个flexbox示例：

.circle {
  display: flex;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 10px rgba(255, 0, 0, 0.46);
}

<div class='circle'>
  <div>1</div>
</div>

Answer 2

为了满足问题的确切要求，我稍微修改了@Michael Arrison的答案，使其与Font-Awesome一起使用。

重点是Font-Awesome CSS-class fa-3x使用em来设置大小：

.fa-3x {
  font-size: 3em;
}

因此height和width .circle类也应在em中指定，以使整个内容适用于不同的字体大小。

因为Font-Awesome CSS-class fa-circle-o的圆圈不使用100％的可用高度和宽度，.circle类的大小为5.1em而不是6em。

.circle {
  display: flex;
  border-radius: 50%;
  width: 5.1em;
  height: 5.1em;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.46);
  -moz-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.46);
  box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.46);
}

<div class="circle">
  <span class="fa-stack fa-3x">
    <i class="fa fa-circle-o fa-stack-2x"></i>
    <strong class="fa-stack-1x">1</strong>
  </span>
</div>

<强>提示：

对堆栈使用fa-lg而不是fa-3x时，.circle类的正确大小为2.2em。

Answer 3

对于Font-Awesome版本5，有人可以使用以下代码：

<div class="circle">
  <span class="fa-stack fa-3x">
    <i class="far fa-circle fa-stack-2x"></i>
    <strong class="fa-stack-1x">1</strong>
  </span>
</div>