html - Fontawesome HTML 和 CSS 社交图标

Question

我正在根据他获得的模板为 friend 设计一个网站，他想做的一件大事就是用其他图标替换导航栏中的社交图标。他主要想为 Twitch 和 Youtube 添加一个。目前 HTML 中的导航栏如下所示:

<ul class="socials-nav">
        <li class="socials-nav-item"><a href="#"><span class="fa fa-twitter"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-facebook"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-github"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-vimeo-square"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-google-plus"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-instagram"></span></a></li>
    </ul>

fa-facebook 的 CSS 如下所示:

.fa-facebook-official:before {
  content: "\f230";

基本上我只是没有太多的模板经验，几乎没有字体很棒。我不是专业人士，只是想帮助 friend 。提前致谢。

Answer 1

确保你有一个字体很棒的 cdn 的链接。示例:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

然后将类添加到 Font Awesome 图标，如下所示 - 最后两个是您要求的。我发现搜索 fontAwesome - Here这是一个很好的做法，因为您可以很容易地直观地看到图标的外观。

<ul class="socials-nav">
        <li class="socials-nav-item"><a href="#"><span class="fa fa-twitter"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-facebook"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-github"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-vimeo-square"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-google-plus"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-instagram"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-twitch"></span></a></li>
        <li class="socials-nav-item"><a href="#"><span class="fa fa-youtube"></span></a></li>
    </ul>

我也做了一个简单的JSFiddle供您审查。希望这有帮助。

附言。您不需要使用 cdn 将 fontawesome css 添加到您的内部网站，如上所示。但如果你愿意，你当然可以这样做。我在我的网站上这样做，但我知道很多人不这样做 - 如果您有任何其他问题，请告诉我，我会尽力帮助您。