如何在css中设置字体真棒图标？答案

【问题标题】：How to style font-awesome icons in css?如何在css中设置字体真棒图标？
【发布时间】：2018-10-01 14:32:18
【问题描述】：

我在下面有一个截图，我用 HTML/CSS 复制了它。 移动和桌面视图的设计完全相同。在设计中，角度下拉字体真棒图标（在屏幕截图中用箭头标记）与标题正确对齐，这在我的移动视图设计中并非如此。

第一张图片：

我为上面的截图创建了fiddle。由于某些原因，我在小提琴中看不到移动视图（有什么方法可以在小提琴中启用移动视图吗？）。我在小提琴中使用的 HTML 代码的 sn-ps 是：

<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 标题与角度下拉字体真棒图标对齐（在第一张图片中用箭头标记）在移动端视图中。

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

【问题讨论】：

您是否尝试为这些列中的第 th 列设置最小宽度？
@JoshMein 不，我没有尝试。有什么办法，我们可以在小提琴中启用移动视图吗？这样，我会先尝试小提琴，然后在我的代码中尝试。
您不能按说启用移动视图；但是，jsfiddle 允许您调整 HTML、Javascript、CSS 和结果区域的大小。如果您将 CSS 和结果区域的大小调整为小于 700 像素并再次单击运行，则可以复制您的问题。
@user5447339 当您调整宽度时，空间也会减少。您可以在表类上定义 table-layout:fixed。所以所有列都与角度下拉菜单对齐。

标签： html css bootstrap-4 font-awesome fiddle

【解决方案1】：

只需使用 Bootstrap 4 text-nowrap 类到表 ...

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>

【讨论】：

它对我有用。我对上述问题中的fiddle 还有一个问题。我想知道有什么办法，我们可以使内容类似于this 可滚动？
我问这个问题是因为我们将来可能会有更多的专栏。

【解决方案2】：

最简单的方法是将white-space:nowrap 添加到th，这样单词就不会被拆分。但是，您应该为表格添加一些响应能力。

.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>

【讨论】：

它对我有用。我对上述问题中的fiddle 还有一个问题。我想知道有什么办法，我们可以让内容类似于this 滚动？
我问这个问题是因为我们将来可能会有更多的专栏。
@user5447339 试试this，它使用JQuery和mousewheel.js来实现滚动

【解决方案3】：

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

在移动设备上使用responsive table，以免影响表格宽度。
使用媒体查询调整列的大小，使其名称和图标不会相互影响间距，并且表格仍然清晰可辨。
1. 或者，在移动设备上调整标题字体的大小。

使用表格响应

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

使用 CSS 媒体查询

由于您使用的是 Bootstrap 4，因此我将其保持为“移动优先”。

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 上的左/右填充似乎可以解决图标问题。您可能只想调整移动视图的列填充。

【讨论】：

第一点，是的，我在我的代码中使用了响应式表格，但不知何故我错过了它。我现在更新了it..第二点，你能告诉我小提琴吗？有什么办法，我可以在小提琴中显示移动视图吗？

【解决方案4】：

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

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

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

我还会考虑对每列应用不同的最小宽度，因为 Number 列需要大约 140px，但 Table 列只需要大约 80px。这将为名称留出更多空间。

【讨论】：

【解决方案5】：

要解决此问题，您可以尝试将 Bootstrap 4 text-nowrap 类添加到表中。

或您可以编辑表 th 的 css 属性以具有 white-space:nowrap

【讨论】：

你能在小提琴中更新它吗？这样，我就不会在实际代码中出错。