How To Create CSS Rotate Icon Animation

How to create CSS rotate icon animation that will be animated when we take the cursor on the icons. This CSS rotate icon is created by using pure CSS, HTML, and font-awesome icons.

HTML

<section class="animated-icon">
    <a href="#" class="icon fas fa-laptop"><span>Laptop</span></a>
    <a href="#" class="icon fas fa-mobile-alt"><span>Mobile</span></a>
    <a href="#" class="icon fas fa-cog"><span>Setting</span></a>
    <a href="#" class="icon fas fa-link"><span>Link</span></a>
</section>

CSS

body{
    margin: 0;
    padding: 0;
}
.animated-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #3F51B5;
}
.icon {
    width: 80px;
    height: 80px;
    margin: 20px;
    position: relative;
    font-size: 30px;
    color: #ffffff;
}
.icon::before{
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.icon::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 100%;
    border-left: 4px dashed;
    border-bottom: 4px dashed;
}
.icon:hover::after{
    animation: rotate 7s linear infinite;
}
.icon span {
    position: absolute;
    bottom: -20px;
    font-size: 20px;
    text-align: center;
    width: 100%;
    color: #fff;
    transition: 0.7s;
    opacity: 0;
}
.icon:hover span {
    bottom: -35px;
    opacity: 1;
}

/*-- On Hover Rotate Animation CSS --*/

@keyframes rotate {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}