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

Posted 2023-03-06

技术标签:

【中文标题】如何在css中设置字体真棒图标？【英文标题】：How to style font-awesome icons in 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。所以所有列都与角度下拉菜单对齐。 【参考方案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】：

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

或者，在移动设备上调整标题字体的大小。

使用表格响应

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

【讨论】：

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

以上是关于如何在css中设置字体真棒图标？的主要内容，如果未能解决你的问题，请参考以下文章

在谷歌地图标记标签的字体真棒图标标记中放置一个数字

如何在自定义帖子类型UI菜单图标区域添加字体真棒图标？

如何将新的SVG图标添加到字体真棒[重复]

如何应用字体真棒图标颜色-包括白色阴影而不仅仅是轮廓[重复]

如何更改字体真棒图标的颜色

如何在选择选项中添加字体真棒图标？