如何在Bootstrap表格的单元格中添加Glyphicon图标

嘿，这事儿其实超简单的！Bootstrap的Glyphicon图标可以直接嵌入表格的<td>或者<th>标签里，只需要用<span>标签包裹对应的图标类就行。我结合你给出的表格结构，给你几个实用的示例：

1. 在表头单元格添加图标 #

比如想在Firstname表头旁边加个用户图标，你可以这么改：

<table class="table table-striped table-bordered table-hover table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th><span class="glyphicon glyphicon-user"></span> Firstname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
    </tr>
  </tbody>
</table>

2. 在内容单元格添加操作类图标 #

如果是想在表格内容里加编辑、删除这类操作图标，直接把图标放到<td>里就行，还可以搭配链接或者按钮：

<table class="table table-striped table-bordered table-hover table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th>Firstname</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>
        <span class="glyphicon glyphicon-pencil" style="cursor: pointer; margin-right: 10px;"></span>
        <span class="glyphicon glyphicon-trash" style="cursor: pointer;"></span>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>
        <span class="glyphicon glyphicon-pencil" style="cursor: pointer; margin-right: 10px;"></span>
        <span class="glyphicon glyphicon-trash" style="cursor: pointer;"></span>
      </td>
    </tr>
  </tbody>
</table>

小提示 #

• 所有Glyphicon的类都是以glyphicon-开头的，比如glyphicon-edit、glyphicon-search，你可以根据需求替换对应的类名。
• 如果想调整图标的样式（比如颜色、大小），可以直接给<span>加内联样式，或者写自定义CSS类。
• 要是需要让图标可点击，把<span>放到<a>标签里，或者给它加onclick事件就行。

内容的提问来源于stack exchange，提问作者Othman H