引导字形图标的空白占位符答案

【问题标题】：Blank placeholder for bootstrap glyphicon引导字形图标的空白占位符
【发布时间】：2013-11-05 01:45:21
【问题描述】：

我有一个表，在标题中排序引导 glyphicons。仅当表格按该特定标题排序时才会显示该图标。当我单击单元格时，它会更改表格的大小。该表是动态的，所以我不想固定单元格大小。有没有办法可以在其中放置一个占位符来代替字形图标？

我知道 javascript 将如何隐藏它，我只是不知道如何使用 css 来给跨度一些大小。

（这是引导程序 3.0 顺便说一句）...

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

是特定的图标。 Chrome 说它在显示时是 16px 宽。

实际项目稍微复杂一点，这里有一个plunkr：

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

【问题讨论】：

您需要将其包装在一个具有跨度的 div 中，或者对于版本 3 col-lg-# - 如果您发布更多代码，我可以更具体
添加了一个 plunkr，以便您查看发生了什么
你不能改变图标的颜色来匹配背景吗？
@Tarik 做到了……感觉有点做作，但确实有效。不得不设置一个 ng 样式，因为它看起来不像您可以在单个 ng-class 指令中拥有多个 ng-class 指令或多个表达式。
看来你想通了

标签： html css twitter-bootstrap

【解决方案1】：

帮助我将表格样式设置为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 的帮助下，仅当表格按该列排序时，标题上才会显示一个箭头。不需要不可见的字形图标或类似的东西。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

有同样的问题，但也在使用 angularJs。我已执行以下操作来解决此问题。

向 css 添加新类

.glyphicon-hide {
    color: transparent;
}

然后在模板中我可以使用

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

【讨论】：

【解决方案4】：

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

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

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

\2122 是减号。像普通图标一样使用它：

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

【讨论】：

这应该是答案，这正是我要找的！
正是我想要的！只有我使用了content: "\e094";（向下箭头），所以我的间距根本没有改变。
有趣的是，unicode 在 /620 和 /1879 有适当的空格字符，因此您可以在没有透明度规则的情况下使用这些代码
间距对我来说不正确，直到我使用了@Balrog30 对\e094 字符的建议。
visibility: hidden 对我来说透明色效果更好