FontAwesome - 手动堆叠
FontAwesome - Manual Stacking
我正在尝试手动堆叠 Soundcloud 图标并将其显示在正方形上,就像 fa-facebook-square
一样,但我的 Soundcloud 图标是在正方形下方创建的。
到目前为止,这是我的代码:
<div class="row">
<ul style="list-style-type: none; margin: 0px; padding-left: 20px;">
<li style="margin-bottom: 5px;">
<div style="float: left; margin-right: 10px; width: 15px; text-align: center; color: #ff3a00">
<i class="fa fa-square fa-1x" style="font-size: 14px; position: relative; z-index: 10"></i>
<i class="fa fa-soundcloud fa-1x fa-inverse" style="font-size: 8px; position: absolute; z-index: 11; margin-top: 3px; margin-left: 1px"></i>
</div>Soundcloud
</li>
<li style="margin-bottom: 5px;">
<div style="float: left; margin-right: 10px; width: 15px; text-align: center; color: #3b5998;">
<i class="fa fa-facebook-square"></i>
</div>Facebook
</li>
</ul>
</div>
预览:http://jsfiddle.net/gvdr7889/
如果有任何其他 alternative/easier 方法,我欢迎您提出建议。
看thisfiddle。
我所做的是改变它,使你制作的 div 成为背景,它具有橙红色、大小和边框半径。然后正常的fa-soundcloud fa-1x fa-inverse
在里面是白色的。可能需要调整尺寸和颜色,但在我看来这就是您要找的东西。
还有一个 Github issue 要求适当的 soundcloud-square
图标,我建议让他们知道你也想要它
不要设置 margin-top
和 margin-left
,而是使用 top
和 left
。我使用了 5px
和 7px
,但您可以调整它以获得您喜欢的位置。
我正在尝试手动堆叠 Soundcloud 图标并将其显示在正方形上,就像 fa-facebook-square
一样,但我的 Soundcloud 图标是在正方形下方创建的。
到目前为止,这是我的代码:
<div class="row">
<ul style="list-style-type: none; margin: 0px; padding-left: 20px;">
<li style="margin-bottom: 5px;">
<div style="float: left; margin-right: 10px; width: 15px; text-align: center; color: #ff3a00">
<i class="fa fa-square fa-1x" style="font-size: 14px; position: relative; z-index: 10"></i>
<i class="fa fa-soundcloud fa-1x fa-inverse" style="font-size: 8px; position: absolute; z-index: 11; margin-top: 3px; margin-left: 1px"></i>
</div>Soundcloud
</li>
<li style="margin-bottom: 5px;">
<div style="float: left; margin-right: 10px; width: 15px; text-align: center; color: #3b5998;">
<i class="fa fa-facebook-square"></i>
</div>Facebook
</li>
</ul>
</div>
预览:http://jsfiddle.net/gvdr7889/
如果有任何其他 alternative/easier 方法,我欢迎您提出建议。
看thisfiddle。
我所做的是改变它,使你制作的 div 成为背景,它具有橙红色、大小和边框半径。然后正常的fa-soundcloud fa-1x fa-inverse
在里面是白色的。可能需要调整尺寸和颜色,但在我看来这就是您要找的东西。
还有一个 Github issue 要求适当的 soundcloud-square
图标,我建议让他们知道你也想要它
不要设置 margin-top
和 margin-left
,而是使用 top
和 left
。我使用了 5px
和 7px
,但您可以调整它以获得您喜欢的位置。