我使用 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>
最佳答案
你必须在这里做一些 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 图标
- 创建一个带有一些 margin-left 技巧的类(这里是 .over-lap with negative left margin)
- 将此类应用于第二个图标,仅此而已。(根据您的要求改变边距。)
关于jquery - 在 fontawesome 中堆叠图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37292407/