How Can I Use Weather Icons On My Weather Application

I'm using http://erikflowers.github.io/weather-icons/ to display weather icons on my page. However, after inserting the cdn. It doesn't work. https://cdnjs.cloudflare.com/ajax/lib

Solution 1:

You have not included the icons cdn link. Use this

<link rel="stylesheet"type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">

And then use wi-owm-200 class for the icon

body {
  background-image: url("../img/city_vector.jpg");
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto;
}

.hero {
  position: absolute;
  min-height: 100vh;
  min-width: 100vw;
  top: 0;
  bottom: 0;
  background-color: rgba(31, 34, 118, 0.5);
  z-index: -5;
}

.navbar {
  background-color: rgb(69, 106, 171);
}

.navbara {
  color: white;
  font-size: 25px;
}

.weather {
  border: 1px solid white;
  height: 30rem;
  margin-top: 10rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  color: white;
}

.weather-head {
  height: 50%;
}

#weather-icon {
  height: 7rem;
  width: 7rem;
}

.weather-body {
  height: 50%;
  border-top: 1px solid white;
  padding-top: 0.5rem;
}

#description {
  font-size: 2rem;
}

#temperature {
  font-size: 7rem;
}

span {
  font-size: 3rem;
}

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"crossorigin="anonymous"><linkrel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><linkrel="stylesheet"type="text/css"href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css"><linkrel="stylesheet"type="text/css"href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css"><divclass="hero"><navclass="navbar"><aclass="navbar-brand"href="#"><iclass="fa fa-sun-o"aria-hidden="true"></i><strong>Local</strong>Weather
    </a></nav><divclass="container"><divclass="row"><divid=""class="col-8 mx-auto weather"><divclass="weather-head"><h2id="location"class="text-center"></h2><divclass="row"><divid="description"class="description col-6 text-center"><iclass="wi wi-owm-200"></i> Thunderstorm
            </div><divid="temperature"class="col-6 text-center"></div></div><divclass="weather-body"><divclass="row"><divclass="humidity col-4"><divclass="lead text-center">Humidity</div></div><divclass="wind col-4"><divclass="lead text-center">Wind Speed</div></div><divclass="wind-degree col-4"><divclass="lead text-center">Wind Direction</div></div></div></div></div></div></div></div></div>