How To Use Google CSS Icons In Html Page With Example

admin_img Posted By Bajarangi soft , Posted On 02-11-2020

Google css icons, add the following line inside the head section of your HTML page.So today we discuss how to do it.

How To Use Google CSS Icons In Html Page With Example

Step 1:Create index.html file and implement as below code in it.

<h1 class="p1">I <i class="material-icons">favorite</i> To Learn More About CSS </h1>
<i class="material-icons">cloud</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<i class="material-icons">phone</i>
<i class="material-icons">navigation</i>

Step 2:Add below link in index.html file to use google css icons.

<style>
    body {
        background: #2e9ad0;
    }
    .material-icons{
        color: red;
        font-size:50px
    }
</style>

Complete Code For Using Google CSS Icons In Html Page With Example.

<!DOCTYPE html>
<html>
<head>
    <title>How To Use Google CSS Icons In Html Page With Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<style>
    body {
        background: #2e9ad0;
    }
    .material-icons{
        color: red;
        font-size:50px
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Google CSS Icons In Html Page </h1>
    </div>
    <br>
    <div class="well">
        <h1 class="p1">I <i class="material-icons">favorite</i> To Learn More About CSS </h1>
        <i class="material-icons">cloud</i>
        <i class="material-icons">attachment</i>
        <i class="material-icons">computer</i>
        <i class="material-icons">traffic</i>
        <i class="material-icons">phone</i>
        <i class="material-icons">navigation</i>
    </div>
    <br>
</div>
</body>
</html>

Related Post