Pure.CSS Icons

Icons nowadays have become very vibrant. They help to make a website look more attractive and appealing. The icon packs by various sources gives user a huge variety to choose a particular icon suitable to website's look and feel from different options. There are many icon libraries present in the internet which one can use for free of cost or by paying a sum of money.

Pure CSS supports the following popular icon libraries ,these are free to use −

  • Font Awesome Icons
  • Google Material Icons
  • Bootstrap Icons

Below are given the CDN paths of the icon packs which you can use to use the icons in your website. Just add these CDN paths in your webpage and you are open to use the icons from huge library.

Note: Just remember that you need to know the name of the classof the icon to add them in your website because every icon has a particular class. You have to place the name of the icon's class within the <i> tag. See the example below to understand how to use icons with <i> tag.

CDN Path

  • Font Awesome : <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
  • Bootstrap : <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
  • Google Material : <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!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>


Pure.CSS Icons


Font Awesome Icons

Google Material Design Icons

cloud cloud cloud cloud cloud cloud

Bootstrap Icons

Facebook Youtube

Color Picker

List of color names supported by all browser »

Character Code

List of character codes to display special character »

Language Code

List of all language supported by all browser »

Country Code

List of Country code supported by all browser »

Latest Updates

PHP Introduction

How to Run a PHP program in Xampp?

How can I create a phpinfo.php page?

How to Define a Variable in PHP

PHP Echo and Print Statements

Working with PHP Operators

Understanding the PHP Data Types

How to Write Comments in PHP

How to Define a Constant in PHP

PHP if...else...elseif Statements