Add ionicons in your HTML

How to use Open source icons

by Vikash Pareek

HTML

<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<header>
  <div class="container">
    <div class="logo">
      <a href="#">logo</a>
    </div>
    <div class="navbar">
      <ul>
        <li>
          <a href="#"><ion-icon name="logo-html5"></ion-icon> html</a>
        </li>
        <li>
          <a href="#"><ion-icon name="logo-css3"></ion-icon> css</a>
        </li>
        <li>
          <a href="#"><ion-icon name="logo-wordpress"></ion-icon> wordpress</a>
        </li>
        <li>
          <a href="https://webtutorialhindi.com/">learn</a>
        </li>
      </ul>
    </div>
  </div>
</header>
<div class="banner">
  <h1>How To Use ionicon in Hindi</h1>
  <h4>Unique Icons In Ionicon</h4>
  <a href="#">How To Use <ion-icon name="arrow-forward-outline"></ion-icon></a>
</div>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 65.5%;
}
body{
    background: #000;
    font-family: sans-serif;
}
a{
    text-transform: uppercase;
    text-decoration: none;
}
.container{
    max-width: 70%;
    margin: auto;
}
header {
    padding-top: 2rem;
    border-bottom: 1px solid #fff;
    padding-bottom: 2rem;
}
header .container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.logo{
    margin-right: auto;
}
.logo a{
    font-size: 2rem;
    color: #fff;
    font-weight: bold;
}
.navbar{
    margin-left: auto;
}
li{
    float: left;
    list-style: none;
}
.navbar li a,.banner a{
    font-size: 1.4rem;
    padding-right: 4rem;
    font-weight: bold;
    color: #ffc107;
}
.navbar li a ion-icon,.banner ion-icon{
    color: #fff;
    font-size: 2rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: .2rem;
}
.navbar li:last-child a,.banner a{
    padding: 1rem 2rem;
    border: 1px solid #fff;
    border-radius: 5px;
}
.banner a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 14rem;
    padding: 0;
    height: 4rem;
    margin: auto;
    margin-top: 2rem;
}
h1{
    font-size: 5rem;
    text-transform: capitalize;
    color: #fff;
}
h4{
    font-size: 3rem;
    text-transform: capitalize;
    color: #fff;
    margin-top: 2rem;
}
.banner{
    margin-top: 30rem;
    text-align: center;
}
@media (max-width: 1190px){
  html{
    font-size: 55%;
  }
  .container {
    max-width: 100%;
    margin: auto;
    padding: 0 20px;
  }
  .banner {
    margin-top: 15rem;
  }
}