Bootstrap glyphicon的空白占位符

Question

我有一个带有排序Bootstrap图标的表格头部。只有当该表格按该特定标题进行排序时，该图标才会显示。当我单击单元格时，它会更改表格的大小。表格是动态的，因此我不想固定单元格大小。是否有一种方法可以放置一个占位符来代替Glyphicons?

我知道javascript如何隐藏它，但我不知道如何编写css以使该具有一定的大小。

（顺便说一下，这是bootstrap 3.0）...

<span class="glyphicon glyphicon-arrow-down"><span>

这是特定的图标。Chrome表示，当图标被显示时它的宽度为16px。

实际项目有点更加复杂，这里是一个 plunkr 链接：

http://plnkr.co/edit/N6nkW3e4gDdpQdtRC8ue?p=preview

- Snowburnt

---

你需要将它包装在一个带有 span 的 div 中，或者对于版本 3 col-lg-# - 如果您发布更多的代码，我可以更具体地说明。 - Matt Lambert

你能否将图标的颜色改成与背景相匹配的颜色？ - Tarik

@Tarik 这就是解决方法...感觉有点牵强，但它起作用了。必须使用一个ng-style进行调整，因为似乎你不能在单个ng-class指令中拥有多个ng-class指令或多个表达式。 - Snowburnt

看起来你已经弄明白了。 - Matt Lambert

@matt Lambert，是的，Tarik是对的。我只是没有答案。 - Snowburnt

Answer 1

我认为在glyphicon字体中没有空格字符。

为什么不使用透明的字体颜色？

.glyphicon-none:before {
    content: "\2122";
    color: transparent !important;
}

\2122 是一个减号符号。您可以像正常图标一样使用它：

<i class="glyphicon glyphicon-none"></i>

- Riga

---

这就是我想要的答案，非常感谢！ - Kat Lim Ruiz

我也正想找这个！只不过我使用了 content: "\e094";（向下箭头），这样我的间距就完全没有改变。 - nbering

有趣的是，Unicode 在 /620 和 /1879 有适当的空格字符，因此您可以使用这些代码而无需透明度规则。 - Meori Oransky

在使用 \e094 字符之前，我的间距不正确，直到我采纳了 @Balrog30 的建议。 - Sharlike

visibility: hidden 对我来说比透明颜色更有效。 - Furgas

Answer 2

只需使用 visibility: hidden; 隐藏图标元素。例如：

<span class="glyphicon glyphicon-arrow-down" style="visibility: hidden"><span>

- nick

Answer 3

我曾遇到同样的问题，但同时也在使用AngularJs。为了解决这个问题，我做了以下操作。

在CSS中添加新类。

.glyphicon-hide {
    color: transparent;
}

然后在模板中我可以使用

<i class="glyphicon glyphicon-arrow-down" ng-class="{'glyphicon-hide': conditionValue}></i>

- Vitaly

Answer 4

对我有帮助的是将表格样式设置为style="table-layout: fixed"。此后，我的表格列宽保持不变，无论是否在列标题旁边显示图标。

以下是表格的代码：

<table class="table table-hover" style="table-layout: fixed;">
<thead>
  <tr>
    <th ng-click="order('col1')">
      Column Header 1
      <span class="glyphicon" ng-show="orderType == 'col1'"
        ng-class="orderReverse ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up'"></span>
    </th>
    <th ng-click="order('col2')">
      Column Header 2
      <span class="glyphicon" ng-show="orderType == 'col2'"
        ng-class="orderReverse ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up'"></span>
    </th>
  </tr>
</thead>
<tbody>
  ...
</tbody>
</table>

order() 函数设置 orderType 并翻转 orderReverse。通过使用 ng-show，仅当表格按该列排序时，标题上才会显示箭头。不需要任何不可见的 glyphicon 或其他东西。

- Jim Holden