如何在 css 中设置 font-awesome 图标的样式？

Question

我有一张截图，下面是我在 HTML/CSS 中复制的截图。 移动和桌面视图的设计完全相同。在设计中，角度下拉菜单 font-awesome 图标 （在屏幕截图中用箭头标记） 与标题正确对齐，这在我的移动视图设计中并非如此。

第一张图片：

我为上面的屏幕截图创建了 fiddle。由于某些原因，我在 fiddle 中没有看到移动视图（有什么方法可以在 fiddle 中启用移动视图吗？）。我在 fiddle 中使用的 HTML 代码片段是：

<tr>
    <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="number">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="table2">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="status">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
</tr>

在我的电脑上的移动视图 （如下面的屏幕截图所示），我看到 Number 和 Table 角度下拉图标上的标题。

第二张图片:

问题陈述：

我想知道我需要在 fiddle 中进行哪些更改，以便 Number 和 Table标题 与移动视图中的角度下拉菜单 font-awesome 图标（在第一张图片中用箭头标记）对齐。

由于某些原因，我无法在 fiddle 中看到移动视图。

Answer 1

您似乎立即想到了两个选项。

在移动设备上使用 responsive table，这样 table 宽度就不会受到影响。
使用媒体查询调整列的大小，使名称和图标不会干扰彼此的间距，并且 table 仍然清晰可辨。
1. 或者，在移动设备上调整 header 字体。

使用table-responsive

用 <div class="table-responsive"> 包围您的 table 以确保响应速度。

使用CSS媒体查询

既然你用的是Bootstrap 4，我就保留为"mobile-first."

th {
    font-size: 14px; // Smallest font size you want them to render
}
@media (min-width: 768px) {
    // After the screen is at least 768px wide, use larger font size
    // alter the min-width as many times as needed or appropriate
    th{
      font-size: 16px;
    }
}

这基本上就是您在 CSS 中所做的。首先维护移动端视图，然后逐步扩大到更大的显示尺寸。

编辑 2

调整样式，删除 .table td, .table th 上的 left/right 填充似乎解决了图标问题。您可能只想调整移动视图的列填充。

Answer 2

您可以设置 table td 和 th 的最小宽度。

.table td,
.table th {
    border-top: none! important;
    padding-left: 3%;
    min-width:140px;
}

您可能需要调整应用于最小宽度的实际值。这将防止列占用小于设置的宽度，但不会限制列仅占用 space 的数量。

我还会考虑对每列应用不同的最小宽度，因为数字列需要大约 140 像素，而 Table 列只需要大约 80 像素。这将为该名称留下更多 space 可用。

Answer 3

最简单的方法是将 white-space:nowrap 添加到 th，这样单词就不会被拆分。但是，您应该为 table.

添加一些响应

.table td,
.table th {
  border-top: none! important;
  padding-left: 3%;
}

.table thead th {
  border-bottom: none! important;
  white-space: nowrap;
}

.table td.left {
  padding-right: 32%;
}

.dropdown a {
  color: #676767;
  font-weight: bold;
  font-size: 14px;
}

.dropdown li {
  padding-left: 20px;
}

.dropdown li:hover {
  background-color: #EDEDED;
}

.body-manage-attendees {
  width: 100% !important;
}

.body-manage-attendees tbody tr:hover {
  background-color: #EDEDED;
}

.body-manage-attendees .number {
  padding-left: 2%;
  padding-right: 6%;
}

.body-manage-attendees .table1 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .table2 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .status {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right-bill {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
  padding-left: 1%;
  text-align: center;
  border: 1px solid white;
  color: black;
}

.body-manage-attendees .right-unapid {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #10314C;
}

.square {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  margin-right: 5%;
  height: 15px;
  width: 15px;
  vertical-align: middle;
}

.square.white {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  background-color: white;
  height: 15px;
  margin-right: 10%;
  width: 15px;
  vertical-align: middle;
}

.right-itemswaiting span {
  vertical-align: middle;
  padding-left: 1%;
}

.table td,
.table th {
  border-top: none! important;
  padding-left: 3%;
}

.table thead th {
  border-bottom: none! important;
}

.table td.left {
  padding-right: 32%;
}

.right-itemswaiting {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.right-itemsreceived {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.body-manage-attendees tbody tr:hover {
  background-color: #EDEDED;
}

.body-manage-attendees .number {
  padding-left: 2%;
  padding-right: 6%;
}

.body-manage-attendees .table1 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .table2 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .status {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right-bill {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
  padding-left: 1%;
  text-align: center;
  border: 1px solid white;
  color: black;
}

.body-manage-attendees .right-unpaid {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
  padding-left: 1%;
  color: white;
  text-align: center;
  background-color: #10314C;
}

.body-manage-attendees .right-itemswaiting {
  padding-left: 1%;
  text-align: center;
  color: white;
  border: 1px solid white;
  background-color: #10314C;
}

.body-manage-attendees .right-unpaid {
  padding-left: 1%;
  color: white;
  background-color: #1173B7;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="table-responsive body-manage-attendees">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="number">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="table2">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="status">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="left">Amanda Doe</td>
        <td class="number1">250</td>
        <td class="table1">2</td>
        <td class="right-bill">Bill</td>
      </tr>
      <tr>
        <td class="left">Andy Doe</td>
        <td class="number1">14</td>
        <td class="table1">1</td>
        <td class="right-bill">Bill</td>
      </tr>

    </tbody>
  </table>
</div>

Answer 4

就用Bootstrap4text-nowrapclass到table第...

https://jsfiddle.net/9shn3qxz/

<div class="table-responsive body-manage-attendees">
        <table class="table table-hover">
            <thead>
                <tr>
  <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="number text-nowrap">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="table2 text-nowrap">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="status text-nowrap">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="left">Amanda Doe</td>
                    <td class="number1">250</td>
                    <td class="table1">2</td>
                    <td class="right-bill">Bill</td>
                </tr>
                <tr>
                    <td class="left">Andy Doe</td>
                    <td class="number1">14</td>
                    <td class="table1">1</td>
                    <td class="right-bill">Bill</td>
                </tr>

            </tbody>
        </table>
    </div>

Answer 5

要解决此问题，您可以尝试将 Bootstrap 4 text-nowrap class 添加到 table th.

或您可以编辑 css 属性 of table th 以获得 white-space:nowrap

如何在 css 中设置 font-awesome 图标的样式？

How to style font-awesome icons in css?

html

css

font-awesome

fiddle

bootstrap-4

使用table-responsive

使用CSS媒体查询

编辑 2