在 fontawesome 中堆叠图标

Question

我使用 font awesome 框架显示网格图标。有没有办法堆叠图标以便我可以显示 3x2 网格图标？

<a href="./"><i class="fa fa-square"></i> 1x1</a>
<a href="./" ><i class="fa fa-square"></i><i class="fa fa-square"></i> 2x1</a>
<a href="./"><i class="fa fa-th-large"></i> 2x2</a>
<a href="./"><i class="fa fa-th-large"></i> 3x2</a> << can not create 3 x 2
<a href="./"><i class="fa fa-th"></i> 3x3</a>

Answer 1

没有用于该确切目的的图标，但您可以通过移动带有边距的图标来操纵图标，这样您最终会得到您需要的东西，但这确实很老套。

<a href="./"><i class="fa fa-th-large"></i><i class="fa fa-th-large"></i> 3x2</a>

.fa-th-large ~ .fa-th-large{
  margin-left: -8px;
}

Answer 2

你必须在这里做一些 margin-left 技巧来变通，就像这样

您的 HTML 代码（3x2 图标）

<a href="./"><i class="fa fa-th-large"></i><i class="fa fa-th-large over-lap"></i> 3x2</a>

相对CSS代码会是这样

.over-lap{
  margin-left:-7px; 
}

你要做什么？

再添加一个 2x2 图标
创建一个带有一些左边距技巧的 class（这里是 .over-lap with negative left margin）
将这个 class 应用到第二个图标，就是这样。（根据您的要求改变边距。）

在 fontawesome 中堆叠图标

Stack icons in fontawesome

css

jquery

font-awesome