How to make button html as icon use Font awesome

In this example i will be show the difference between italic tag html and button tag html when i use font awesome icons, and what the best way to use icon correctly in front-end of your website, the important for me it's The practical side to understant me:

when i use the standard code (italic tag html '<i>') of font awesome icons, this is the result

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <style> body{background:white} i.fa{color:#2d2d2d;background:#f3f3f3;margin:0 5px; border-radius:50%; padding:3px; width:30px; height: 30px; border:0; box-shadow:0 0 5px 0px; transition: 0.5s} i.fa:hover { background: radial-gradient(#ff1010, #9a0707); color: white; text-shadow: 0 0 4px #ffc107; transform: rotate( 360deg ); box-shadow: 0 0 3px 2px; transition: 0.6s; cursor: pointer; } </style> <i class="fa fa-facebook"></i><i class="fa fa-youtube"></i><i class="fa fa-twitter"></i><i class="fa fa-instagram"></i>

when i use (button tag html '<button>') ,this is the result

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <style> body{background:white} button.fa{color:#2d2d2d;margin:0 5px;background:#f3f3f3 ;border-radius:50%; padding:3px; width:30px; height: 30px; border:0; box-shadow:0 0 5px 0px; transition: 0.5s;outline: 0;} button.fa:hover { background: radial-gradient(#ff1010, #9a0707); color: white; text-shadow: 0 0 4px #ffc107; transform: rotate( 360deg ); box-shadow: 0 0 3px 2px; transition: 0.6s; cursor: pointer; } </style> <a href="#"><button class="fa fa-facebook"></button></a> <a href="#"><button class="fa fa-youtube"></button></a> <a href="#"><button class="fa fa-twitter"></button></a> <a href="#"><button class="fa fa-instagram"></button></a>

© Manajmnt code

Share to :

☷✎