我试图在页脚部分设置图标按钮,由于某种原因,社交媒体图标没有出现。
我在标题部分使用了<link>
标签,但这不起作用:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<footer>
<div class="container-fluid padding">
<div class=" row text-center padding ">
<div class="col-12">
<div class="col-12 social padding ">
<a class="btn-floating btn-lg btn-fb" type="button" role="button"><i class="fab fa-facebook-f"></i></a>
<a class="btn-floating btn-lg btn-tw" type="button" role="button"><i class="fab fa-twitter"></i></a>
<a class="btn-floating btn-lg btn-gplus" type="button" role="button"><i class="fab fa-google-plus-g"></i></a>
<a class="btn-floating btn-lg btn-ins" type="button" role="button"><i class="fab fa-instagram"></i></a>
<a class="btn-floating btn-lg btn-yt" type="button" role="button"><i class="fab fa-youtube"></i></a>
<a class="btn-floating btn-lg btn-whatsapp" type="button" role="button"><i class="fab fa-whatsapp"></i></a>
</div>
<div class="col-12">
<hr class="light" style="border-top: 2px solid #222222;
width:1000px;
margin-top: .3rem;
margin-bottom: 1rem;">
<h5>©2020 Copyright </h5>
</div>
</div>
</div>
</div>
</footer>
答案 0 :(得分:0)
只包括套件。将<script src="https://kit.fontawesome.com/13ccb33514.js" crossorigin="anonymous"></script>
而不是<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
添加到文档的开头。
这是您的代码:
<script src="https://kit.fontawesome.com/13ccb33514.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<footer>
<div class="container-fluid padding">
<div class=" row text-center padding ">
<div class="col-12">
<div class="col-12 social padding ">
<a class="btn-floating btn-lg btn-fb" type="button" role="button"><i class="fab fa-facebook-f"></i></a>
<a class="btn-floating btn-lg btn-tw" type="button" role="button"><i class="fab fa-twitter"></i></a>
<a class="btn-floating btn-lg btn-gplus" type="button" role="button"><i class="fab fa-google-plus-g"></i></a>
<a class="btn-floating btn-lg btn-ins" type="button" role="button"><i class="fab fa-instagram"></i></a>
<a class="btn-floating btn-lg btn-yt" type="button" role="button"><i class="fab fa-youtube"></i></a>
<a class="btn-floating btn-lg btn-whatsapp" type="button" role="button"><i class="fab fa-whatsapp"></i></a>
</div>
<div class="col-12">
<hr class="light" style="border-top: 2px solid #222222;
width:1000px;
margin-top: .3rem;
margin-bottom: 1rem;">
<h5>©2020 Copyright </h5>
</div>
</div>
</div>
</div>
</footer>
答案 1 :(得分:-1)
普通CSS和JS怎么样?: fiddle
<a class="btn-fb"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Facebook_icon_2013.svg/300px-Facebook_icon_2013.svg.png"</a>
img {
width: 10%;
}
document.querySelector('.btn-fb').onclick = () => {
window.location.href = "https://en.wikipedia.org/wiki/Facebook,_Inc.";
}