HTML
Ich möchte gerne das Cevron-Zeichen von Font Awesome in einen Button zum Top Scrollen einsetzen und habe mir dazu den angehängten Code von w3schools kopiert. Warum erscheint das Cevron Zeichen nicht auf dem Button? Kann mir jemand weiter helfen?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test </title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
</style>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top"><span><i class="fas fa-chevron-up"></i></span></button>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">
<h2>This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam veritatis possimus molestias enim inventore voluptatibus totam nisi a repellat et fugit non animi nam expedita labore, quia minus autem! Corporis.
Omnis eaque at quasi, dicta similique necessitatibus harum aut suscipit, repudiandae accusantium odio aperiam voluptatibus nobis voluptas odit iusto hic consequatur ullam esse, temporibus nisi consequuntur. Atque veritatis alias sapiente?
Fugiat, alias ea. Hic ipsam ratione consequuntur pariatur reiciendis, beatae, rerum eos error atque eaque vel doloribus amet officia explicabo nesciunt. Libero nihil excepturi, vero odit maxime nam quia repellat.
Mollitia eos, aliquid natus nam ut eaque facere placeat commodi at minima dolor facilis magni dolores minus, architecto, provident aspernatur reiciendis adipisci est harum sit. Doloribus consequuntur eligendi nobis libero!
Tenetur rerum, suscipit vitae omnis animi aliquid voluptate labore veniam harum, eius perspiciatis facere natus. Facere delectus aliquid soluta debitis odio quasi omnis, velit minus unde animi ab, dicta magni.
Tempore, vitae. Quos excepturi animi eos consectetur eaque voluptate, voluptatem repudiandae deserunt aperiam perferendis sit, iusto, facere quas a ex veniam officiis? Velit nulla, odit ab aliquam cupiditate ipsa numquam?
soluta alias ex! Fugit labore magnam vel exercitationem eveniet sequi hic unde illum autem deleniti! Sint, rerum.</p>
</div>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
Alles anzeigen