重新定位字体真棒图标答案

【问题标题】：Repositioning Font awesome Icons重新定位字体真棒图标
【发布时间】：2016-01-01 03:11:17
【问题描述】：

现在看起来像this。

我现在的html是

    <div class="col-lg-4 text-center">
                <i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
                <p><a class="email specialcolor" href="mailto:sales@higherpromos.com">sales@higherpromos.com</a></p>
                <i class="fa fa-2x fa-facebook fa-pull-left wow bounceIn social"></i>
                <i class="fa fa-2x fa-twitter fa-pull-left wow bounceIn social"></i>
                <i class="fa fa-2x fa-google-plus fa-pull-left wow bounceIn social"></i>
            </div>

目前没有 CSS。我希望 facebook、google plus 和 twitter 徽标位于电话号码和电子邮件地址之间。我通过将 fa-pull-left 添加到类中来接近它，但它并不完全正确....

【问题讨论】：

您的代码看起来不像图像显示的那样。你能粘贴用于生成图像的代码吗？
就是图中的代码。我只是截取了网站上显示的内容。

标签： html css

【解决方案1】：

您的代码需要更好地实现 Bootstrap 类。并单独分离您的元素。（2 列 6 个跨度，1 个全宽居中内容列）通过使用以下类：

<div class="col-xs-12 col-sm-12 col-md-6 text-center">
<div class="col-xs-12 text-center">

编辑

如果类太大，您可以减小列的大小并使用 -push-* 类进行相应调整，而不会失去其他设备的任何响应能力，并避免不必要的绝对位置、浮动或大边距。

对演示进行了编辑以显示此概念。在这种情况下，div 看起来像这样：

<div class="col-xs-12 col-sm-12 col-md-4 col-md-push-2 text-center">
<div class="col-xs-9 col-xs-push-1 text-center">

这里是demo的详细信息

【讨论】：

那是把电话号码和电子邮件地址分散得太多了。我喜欢它的位置，我只需要把图标移过来。
那是因为我使用了 col-md-6 它将屏幕分成两半。但是您可以使用较小的尺寸。从 1 到 12。我不确定你最喜欢哪一个。现在，请记住，您可能必须使用一些 col-md-push-* 或 col-md-offset-* 再次居中
成功了！谢谢！现在我的下一个问题是我们的 twitter 提要，将其全部隐藏。 drive.google.com/open?id=0B60t5hh9qJrfY1pvOW93TGIyQ2M 知道如何解决这个问题吗？我希望它与左侧的其余文本保持一致，并在左侧放置几张链接的图片。抱歉有这些问题！我对此完全陌生！
@JenniferSturgis 很高兴它成功了！首先将此标记为可能看到此问题的其他人的答案。并用 twitter 问题和相关代码打开一个新问题，我马上去看看