安排字体真棒图标

Question

使用Wordpress，我在我的页脚中添加了一个自定义HTML小部件，我将其用于一些Font Awesome图标链接。我的代码如下：

<div style="float:right;margin-top:17px">
    <a href="">Font Awesome Icon 1</a>
    <a href="">Font Awesome Icon 2</a>
    <a href="">Font Awesome Icon 3</a>
    <a href="">Font Awesome Icon 4</a>
</div>

这很有效。他们在我的页脚中也坐在我想要的地方，然后按顺序显示，1到4。但后来我被要求添加第5个图标，这次是带弹出窗口的电话图标，显示客户的电话号码。

所以我的代码变成了：

<div class="footerSocialWidgets">
    <div class="widgetPhoneTooltip">
        <a href="">Phone Font Awesome Icon</a>
        <span class="widgetPhoneTooltipText">PHONE NUMBER</span>
    </div>
    <a href="">Font Awesome Icon 1</a>
    <a href="">Font Awesome Icon 2</a>
    <a href="">Font Awesome Icon 3</a>
    <a href="">Font Awesome Icon 4</a>
</div>

我的CSS如下：

.footerSocialWidgets {
        float: right;
        margin-top: 17px;
}

.widgetPhoneTooltip {
    position: relative;
    display: inline-block;
}

.widgetPhoneTooltip .widgetPhoneTooltipText {
    visibility: hidden;
    width: 180px;
    top: -5px;
    right: 105%;
    margin-top: 7px;
    background-color: black;
    color: white;
    opacity: 0.6;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
}

.widgetPhoneTooltip:hover .widgetPhoneTooltipText {
    visibility: visible;
}

这一切都很有效，除了无论我尝试什么，新手机图标始终是最后一个图标。由于页面中的限制，我需要将其显示为第一个图标，以便我可以从左侧显示文本弹出窗口。

根据下图，手机图标卡在最右侧。无论我尝试什么，我都不能把它哄到左边进入Facebook图标当前占用的空间。这样，文本弹出窗口将显示图标的左侧，不会干扰其他任何内容。我只是不知道我可以改变什么来改变手机图标的位置。任何帮助将不胜感激。

编辑：我仍然遇到麻烦。我将第一个div更改为类选择器只是为了使它更清晰，尽管我只是转移了相同的CSS。

编辑2：导致问题的是电话图标DIV。我只是单独留下字体真棒图标，它按预期出现在左侧。然后，我在DIV（widgetPhoneTooltip）中删除了所选的类，只留下了一个标准的DIV，它仍然执行了它。