Font Awesome：堆叠图标并获得像素完美大小

Question

我正在尝试使用 Font Awesome 内置的堆叠技术在圆圈内显示小图标。但是，我想完全控制圆圈的大小 - 比他们可用的大小选项更重要。

我已经建立了一个概念证明，它有效，但圆圈没有以所需的尺寸显示。我已将其指定为 60x60，但是如果您检查元素，容器的大小是正确的，但实际的圆圈图标有点内嵌。

body {
  font-size: 12px;
  font-family: Courier;
}

.fa-stack.custom {
  font-size: 60px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  overflow: hidden;
  background-color: pink;
}

.fa-stack.custom .circle {
  font-size: 60px;
}

.fa-stack.custom .icon {
  font-size: 18px;
  color: #ff00ff;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack custom">
      <i class="circle fa fa-circle fa-stack-2x"></i>
      <i class="icon fa fa-times fa-stack-1x fa-inverse"></i>
    </span>

https://jsfiddle.net/louiswalch/nxo2s1gt/13/

有什么想法可以使它适用于精确的像素尺寸吗？

Answer 1

如果你考虑V5和SVG版本，你会有更好的准确性。高度定义为 2em，因此使用 30px 作为 font-size 将为您提供所需的结果。

.fa-stack.custom {
  font-size: 30px;
  background-color: pink;
}

.fa-stack.custom .icon {
  font-size: 18px;
  color: #ff00ff;
}

<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<span class="fa-stack custom">
      <i class="circle fa fa-circle fa-stack-2x"></i>
      <i class="icon fa fa-times fa-stack-1x fa-inverse"></i>
    </span>

如果您希望圆正好是 60px，请稍微大一点，因为路径没有覆盖整个视框区域：

.fa-stack.custom {
  font-size: 30.97px;
  background-color: pink;
}

.fa-stack.custom .icon {
  font-size: 18px;
  color: #ff00ff;
}

<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<span class="fa-stack custom">
      <i class="circle fa fa-circle fa-stack-2x"></i>
      <i class="icon fa fa-times fa-stack-1x fa-inverse"></i>
    </span>
    
   
 <p>Below the SVG of the circle to notice the small gaps</p>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"style="border:1px solid;"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>

您可以使用 CSS 变量来使处理更容易。值 98.66 来自这样一个事实，即如果 SVG 是 100px 高度，则内部路径将是 98.66px 高度：

.fa-stack.custom {
  font-size: calc(var(--s)*(50/96.88));
  background-color: pink;
}

.fa-stack.custom .icon {
  font-size: 18px;
  color: #ff00ff;
}

<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<span class="fa-stack custom" style="--s:60px">
      <i class="circle fa fa-circle fa-stack-2x"></i>
      <i class="icon fa fa-times fa-stack-1x fa-inverse"></i>
    </span>
    
    
    <span class="fa-stack custom" style="--s:70px">
      <i class="circle fa fa-circle fa-stack-2x"></i>
      <i class="icon fa fa-times fa-stack-1x fa-inverse"></i>
    </span>
    
     <span class="fa-stack custom" style="--s:100px">
      <i class="circle fa fa-circle fa-stack-2x"></i>
      <i class="icon fa fa-times fa-stack-1x fa-inverse"></i>
    </span>

Font Awesome：堆叠图标并获得像素完美大小

Font Awesome: Stacking icons and getting pixel perfect sizing

css

font-awesome