jquery - 在链接标签中隐藏/显示文本，但在响应模式下不显示字体图标

Question

我已将图标设置为水平放置的导航栏。但我在这些图标后添加了一些文字，解释与图标相关的操作。

例如，fa fa-home (FontAwesome) 中的“home”图标，这个图标“Home”后面的文字。仅当浏览器大小小于 767 宽度像素(twitter bootstrap 响应)时，文本才应该可见。

我尝试了几种方法，但都没有用，比如 $('.navbarText').text().hide();, $('a.navbarText' ).text().hide();, $('一个文本').text().hide();。虽然我不记得我的所有尝试，但也尝试了一些纯 CSS 方式。

我想避免在其周围添加 span 或 div。

有什么想法吗？

[编辑] 一些额外的信息。这是呈现的 html:

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a class="dismissLbl" data-animation="true" data-delay="200" data-placement="bottom" data-title="Go to home page" data-trigger="hover" href="/" rel="tooltip"><i class="fa fa-home fa-lg"></i>Home</a></li>
     <li>
        <a class="dismissLbl" data-animation="true" data-container="body" data-delay="200" data-placement="bottom" data-title="Go to my service(s)" data-trigger="manual hover" href="#" rel="tooltip"><i class="fa fa-list fa-lg"></i>About</a>
    </li>
    <li>
        <a class="dismissLbl" data-animation="true" data-container="body" data-delay="200" data-placement="bottom" data-title="Go to my deals" data-trigger="manual hover" href="#" rel="tooltip"><i class="fa fa-thumbs-o-up fa-lg"></i>Contact</a>
    </li>

</ul>
</div>

@Hashem Qolami 和 Brian，当您将浏览器的大小调整为较小的尺寸时，水平对齐的菜单将变成一个按钮，它位于导航栏的右侧，您可以按下该按钮，菜单将打开，看起来像一个 Accordion 。有关直观说明，请参见以下屏幕截图。

至于为什么我不想在它周围添加一个 span 或 div ，是因为我正在使用 @Html.ActionLink("linktext ", "actionName") 来呈现链接，这将需要一些 jquery 在每次浏览器加载或用户导航时围绕链接标记。更不用说必须对每个链接标记进行的检查，以检查它们是否已在每次页面加载或用户导航时被包围。

不必要的性能损失，如果你问我的话。

Answer 1

考虑以下结构:

<a class="dismissLbl" href="#">
    <i class="fa fa-home fa-lg"></i> Home
</a>

在不添加额外元素的情况下，您可以通过提供 font-size 来实现。的 0锚定标签，然后覆盖字体图标上的值(嵌套 <i> 元素):

a.dismissLbl { font-size: 0; }
a.dismissLbl .fa { font-size: 22px; }

/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
    a.dismissLbl,
    a.dismissLbl .fa {
        font-size: 16px; /* or whatever you want */
    }
}

最后使用 @media查询，您可以重置 font-size使文本在超小型设备上可见。