jquery - 在 fontawesome 中堆叠图标

Question

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

演示 Jsfiddle

<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

你必须在这里做一些 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; 
}

你必须做什么？

1. 添加另一个 2x2 图标
2. 创建一个带有一些 margin-left 技巧的类(这里是 .over-lap with negative left margin)
3. 将此类应用于第二个图标，仅此而已。(根据您的要求改变边距。)