丰富多彩的HTML和CSS社交图标
丰富多彩的HTML和CSS社交图标
提问于 2018-06-22 03:47:45
我正在为他获得的模板为朋友设计一个网站，他想做的一件大事情是用其他图标替换导航栏中的社交图标。他主要想为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";基本上，我只是没有太多的经验与模板，几乎没有与字体可怕。我不是一个专业人士，只是想帮助一个朋友。提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-22 04:04:27
确保你有一个链接到一个字体很棒的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将有趣的css添加到您的内部网站。但是如果你愿意，你当然可以这样做。我在我的网站上这样做，但我知道许多人没有-请让我知道如果你有任何其他问题，我会尽我所能帮助你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50976471
复制相关文章
相似问题