screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html lang="en"> <head> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> </head> <body> <h3>How to use font awesome icons cdn</h3> <div><i class="fa fa-envelope"></i> - envelope icon</div> <div> <i class="fa fa-phone"></i> - phone icon</div> <div> <i class="fa fa-search"></i> - search icon</div> <div><i class="fa fa-shopping-cart"></i> - shopping cart icon</div> <div> <i class="fa fa-user"></i> - user icon</div> <div> <i class="fa fa-heart"></i> - heart icon</div> <div><i class="fa fa-play"></i> - play icon</div> <div> <i class="fa fa-cog"></i> - cog/gear icon</div> <div><i class="fa fa-trash"></i> - trash icon</div> <div> <i class="fa fa-check"></i> - checkmark icon</div> </body> <style> /* set the font-size of all icons to 24px */ .fa { font-size: 24px; } /* add some margin to the left of the icon elements */ div>.fa { margin-right: 5px; } /* style the text in the div elements */ div { display: flex; align-items: center; font-size: 18px; margin-bottom: 10px; color: #333; } /* change the color of the envelope icon to red */ .fa-envelope { color: red; } /* change the color of the phone icon to green */ .fa-phone { color: green; } /* change the color of the search icon to blue */ .fa-search { color: blue; } /* change the color of the shopping cart icon to orange */ .fa-shopping-cart { color: orange; } /* change the color of the user icon to purple */ .fa-user { color: purple; } /* change the color of the heart icon to pink */ .fa-heart { color: pink; } /* change the color of the play icon to black */ .fa-play { color: black; } /* change the color of the cog/gear icon to gray */ .fa-cog { color: gray; } /* change the color of the trash icon to brown */ .fa-trash { color: brown; } /* change the color of the checkmark icon to teal */ .fa-check { color: teal; } </style> </html>