Fontawesome HTML 和 CSS 社交图标

Question

我正在根据他获得的模板为朋友设计一个网站，他想做的一件大事就是用其他图标替换导航栏中的社交图标。主要是他想为 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";

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

Answer 1

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

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

然后将类添加到如下所示的字体真棒图标 - 最后两个是您所要求的。我发现搜索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 供您查看。希望这会有所帮助。

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