Question

我有以下代码，使用CSS网格布局进行样式设置。当窗口缩小到定义的断点（例如，500px）以下时，我想将图标显示为单个列。因为FA风格是，嗯...＆＃34;独特＆＃34; （谁在类名中放置空格？），我应该选择哪个选择器？这里.fa-stack是否合适？

<ul class="social">
  <li><a href="https://github.com/"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></li>
  <li><a href="https://linkedin.com/"><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li>
  <li><a href="https://twitter.com/"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
</ul>

Answer 1

类名中的空格是分隔符，因为您可以向一个元素添加多个类。在FontAwesome的情况下，这意味着fa是单个类，fa-twitter是单个类，而fa-2x是另一个类，没有空格这样的东西类。您现在要选择哪一个，但如果要将其应用于所有FontAwesome元素，我将使用.fa类。如果您要将其应用于特定图标，则应使用.fa-twitter（或fa-github或......）。

让我们看一下这个例子：

<i class="fa fa-twitter fa-2x" aria-hidden="true"></i>

这个元素有3个类，您可以给出这样的单独样式（以下所有样式都应用于<i>标记！）：

.fa {
    background: grey;
}

.fa-twitter {
    color: red;
}

.fa-2x {
    font-size: 30px;
}

既然你已经提到过，那些带空格的类不是最好的主意，这很可能不会按预期工作

.fa .fa-twitter .fa-2x {
    background: grey;
    color: red;
    font-size: 30px;
}

因为这只适用于类fa-2x的元素，它具有类fa-twitter的父元素元素，它具有类fa的父元素。 / p>

Answer 2

.fa类设置显示，以下fa- *类与图标和大小匹配。

您应该设置所需的样式以覆盖.fa，然后使用媒体查询来管理其他断点的样式。

Font Awesome中的CSS选择器

2 个答案: