Question

我似乎无法更改堆叠集中字体真棒图标的大小。我希望这些图标现在更小。

我是否需要创建其他css规则？

到目前为止我的代码是;

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x icon-background4"></i>
   <i class="fa fa-circle-thin fa-stack-2x icon-background6"></i>
   <i class="fa fa-lock fa-stack-1x"></i>
</span>

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x icon-background5"></i>
  <i class="fa fa-camera fa-stack-1x"></i>
</span>

CSS

.icon-background4 {
    color: #c0ffc0;
}

.icon-background6 {
    color: #40c040;
}

.icon-background5 {
    color: #c0c0ff;
}

Fiddle

备注

我不想在html中使用内联样式。
我希望外圈保持相同的尺寸

感谢任何帮助。

Answer 1

font-awesome图标是字体而不是图形。因此，只需使用font-size

即可调整大小

添加内置类时，只需通过类应用css属性。

我需要添加!important，否则它无效。也许它可以改进，但你可以看到它在代码小提琴中是如何工作的

.icon-background4 {
  color: #c0ffc0;
}

.icon-background6 {
  color: #40c040;
}

.icon-background5 {
  color: #c0c0ff;
}

.fa-camera {
  font-size: 10px;
}


/* */

.test-icon-size {
  font-size: 15px !important;
}

.test-icon-size-2 {
  font-size: 40px !important;
}

.test-icon-size-3 {
  font-size: 60px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!--  v2 -->

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x icon-background5"></i>
  <i class="fa fa-camera fa-stack-1x test-icon-size"></i>
</span>

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x icon-background5"></i>
  <i class="fa fa-camera fa-stack-1x test-icon-size-2"></i>
</span>

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x icon-background5"></i>
  <i class="fa fa-camera fa-stack-1x test-icon-size-3"></i>
</span>

Answer 2

而不是docker pull jenkins，根据您的要求尝试fa-2x或3x。如果您想要默认大小，请从父span标记中完全删除fa-5x。

Answer 3

尝试使用以下代码。

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x icon-background4"></i>
   <i class="fa fa-circle-thin fa-stack-2x icon-background6"></i>
   <i class="fa fa-lock fa-stack-1x"></i>
</span>

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x icon-background5"></i>
  <i class="fa fa-camera fa-stack-1x"></i>
</span>

字体真棒堆积图标SIze

3 个答案: