Html css3规则在i元素后隐藏文本

我尝试删除文本（在本例中，它是文本主页，但可以是各种文本）

在失败的情况下，它隐藏了fontawesome图标，但我想保留图标，只隐藏文本

我知道理论上我应该这样做：

    <div class=" header-links ">
<!-- Ul Starts -->
<ul class=" nav navbar-nav pull-left ">
    <li class=" test "><a href="#"><i class="fa fa-home"></i><span class="hidden-xs hidden-sm">Home</span></a></li>
</ul>
<!-- ul Ends -->

但就我而言，这是不可能的

.header-links li a {
    font-size: 0px;
}
.header-links li a i {
    font-size: 12px; /* or whatever */
}

---

在这里，我只是在锚上设置字体大小，然后覆盖锚中更具体的

I

选择器。

用更好的提琴更新。是的，非常好，哈哈，我认为我使用了常识，认为只需要一条规则。但是的，这适合。刚刚用第二个li元素测试过。我希望下一个图标会出现在

Home

结束的地方，并且必须增强更多的css，但是没有。。。它工作得很好。图标很好地彼此相邻，就像我想要的那样。

    <div class=" header-links ">
<!-- Ul Starts -->
<ul class=" nav navbar-nav pull-left ">
    <li class=" test "><a href="#"><i class="fa fa-home"></i><span class="hidden-xs hidden-sm">Home</span></a></li>
</ul>
<!-- ul Ends -->

.header-links li a {
    font-size: 0px;
}
.header-links li a i {
    font-size: 12px; /* or whatever */
}