<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Icons </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <style> .xsmall { font-size: 70%; } .small { font-size: 85%; } .large { font-size: 110%; } .xlarge { font-size: 150%; } div { margin: 15px; } </style> <body> <h2><center>Icons</center></h2> <hr> <div> <h3>Font Awesome Icons</h3> <i class="fa fa-cloud xsmall"></i> <i class="fa fa-cloud small"></i> <i class="fa fa-cloud"></i> <i class="fa fa-cloud large"></i> <i class="fa fa-cloud xlarge"></i> <h3>Google Material Design Icons</h3> <i class="material-icons xsmall">cloud</i> <i class="material-icons small">cloud</i> <i class="material-icons large">cloud</i> <i class="material-icons xlarge">cloud</i> <i class="material-icons">cloud</i> <i class="material-icons">cloud</i> <h3>Bootstrap Icons</h3> <i class="glyphicon glyphicon-cloud xsmall"></i> <i class="glyphicon glyphicon-cloud small"></i> <i class="glyphicon glyphicon-cloud"></i> <i class="glyphicon glyphicon-cloud large"></i> <i class="glyphicon glyphicon-cloud xlarge"></i> </div> <div> <button class="pure-button"> <i class="fab fa-google-plus-g fa-lg"></i> Google </button> <a class="pure-button" href="#"> <i class="fab fa-facebook-square fa-lg"></i> Facebook </a> <button class="pure-button"> <i class="fab fa-instagram fa-lg"></i> Instagram </button> <a class="pure-button" href="#"> <i class="fab fa-youtube fa-lg"></i> Youtube </a> <button class="pure-button"> <i class="fab fa-twitter fa-lg"></i> Twitter </button> </div> </body> </html>
