我正在为他获得的模板为朋友设计一个网站,他想做的一件大事情是用其他图标替换导航栏中的社交图标。他主要想为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";
基本上,我只是没有太多的经验与模板,几乎没有与字体可怕。我不是一个专业人士,只是想帮助一个朋友。提前谢谢。
发布于 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添加到您的内部网站。但是如果你愿意,你当然可以这样做。我在我的网站上这样做,但我知道许多人没有-请让我知道如果你有任何其他问题,我会尽我所能帮助你。
https://stackoverflow.com/questions/50976471
复制相似问题