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添加到内部网站中。但是如果您愿意，您当然可以这样做。我在我的网站上做到了，但我知道很多不知道-如果您有任何其他问题，请尽我所能，请尽我最大的帮助。

Fontawesome HTML和CSS社交图标

1 个答案: