css - 如何在 CSS 中选择我的字体很棒的图标？

Question

很抱歉提出这么简单的问题，但我已经尝试了我能想到的一切。如何在 css 中选择字体很棒的图标？我正在尝试将它们放入内联列表中，并执行一些其他样式，但很难正确选择它们。

我的 HTML:

<div class="container">
<div class="row">
    <div class="twelve columns">
        <ul class="social-icons list-inline">
            <li><a href="https://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a></li>
            <li><a href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook"></i></a></li>
            <li><a href="http://instagram.com" target="_blank"><i class="fa fa-instagram"></i></a></li>  
            <li><a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin"></i></a></li>
        </ul>
    </div>
</div>

我正在使用 Skeleton，我认为它让我在正确执行选择器方面有点困惑，因为这是我第一次使用它。

Answer 1

您的 HTML 看起来不错。我认为您只是忘记包含 Font Awesome 样式表。

然后，如果您想修改特定的类，例如使列表内联，只需执行以下操作:

.fa-twitter {
  font-size: 50px !important;
}

.list-inline li {
  display: inline;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
    <div class="twelve columns">
        <ul class="social-icons list-inline">
            <li><a href="https://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a></li>
            <li><a href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook"></i></a></li>
            <li><a href="http://instagram.com" target="_blank"><i class="fa fa-instagram"></i></a></li>  
            <li><a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin"></i></a></li>
        </ul>
    </div>
</div>