我怎样才能 select 我的字体很棒的图标 CSS？

Question

很抱歉提出这么简单的问题，但我已经尝试了所有我能想到的方法。我怎样才能 select 我的 font-awesome 图标 css？我试图将它们变成一个内联列表，并做一些其他的样式，但我正在努力正确 select 它们。

我的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，我认为它让我在做 selectors 时有点混乱，因为这是我第一次使用它。

Answer 1

您可以使用选择器 .fa-twitter、.fa-facebook、.fa-instagram、.fa-linkedin...这里是 fiddle“https://jsfiddle.net/DTcHh/15521/”

"https://jsfiddle.net/DTcHh/15521/"

Answer 2

你的 HTML 看起来不错。我想你只是忘了包含 Font Awesome 样式表。

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

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

Answer 3

如果您想为所有 FA 图标设置样式，那么您需要的选择器是 .fa

.fa {显示：内联；}

我怎样才能 select 我的字体很棒的图标 CSS？

How can I select my font awesome icons in CSS?

css

font-awesome