字体神器堆叠图标大小

Question

我似乎无法更改堆叠集合中字体awesome图标的大小。我希望这些图标比目前小。

我需要创建一个额外的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中使用内联样式。
• 我希望外层圆保持相同的大小。

感谢任何帮助。

- TheOrdinaryGeek

---

你尝试使用字体大小了吗？ - Sagar Kodte

这是因为您的围绕它们的 span 具有 width:2em，而您的图标具有 width:100%。 类： .fa-stack-2x { 位置：绝对； 左侧：0； 宽度：100%; 文本对齐方式：居中； } - Goku

你可以为较小的字体添加类 fa-1、fa-2、fa-3。 - lalit bhakuni

在这个代码中：<span class="fa-stack fa-5x"> 中的 fa-5x 类是一个 font-size 的倍数...太大了。根据需要调整 fa-5x 的值（例如 fa-3x）。 - zer00ne

Answer 1

< p >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>

- Sébastien Gicquel

---

谢谢@Sébastien Gicquel，但我只想改变图标的大小。我希望外圆保持相同的大小。 - TheOrdinaryGeek

@TheOrdinaryGeek 我已经更新了我的答案。对你来说更好吗？如果是期望的结果，我会尝试改进代码。 - Sébastien Gicquel

Answer 2

不要使用 <span class="fa-stack fa-5x">，根据您的需求尝试使用fa-2x或3x。如果您想要默认大小，则完全从父级span标记中删除fa-5x。

- Ankit

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>

- Rahul Mittal