<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>
<body>
<h1>fa-solid fa-arrow-right-long</h1>
<i class='fa-solid fa-arrow-right-long'></i>
<i class='fa-solid fa-arrow-right-long' style='font-size:20px'></i>
<i class='fa-solid fa-arrow-right-long' style='font-size:36px;color:red'></i>
<button class='custom-button'><i class='fa-solid fa-arrow-right-long'></i> </button>
<style>
.custom-button
{
margin-top:10px;
display:block;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #ad6800;
color: #fff;
transition: background-color 0.3s ease;
}
.custom-button:hover {
background-color: #874d00;
}
</style>
</body>
</html>