您尚未包括图标cdn链接.使用这个

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

然后使用 wi-owm-200 类作为图标

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);
}

.navbar a {
  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;
}

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