如何在我的天气应用程序中使用天气图标

时间:2018-03-10 15:57:05

标签: html css icons font-awesome

我使用http://erikflowers.github.io/weather-icons/在我的页面上显示天气图标。但是,插入cdn后。它不起作用。 https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css该图标有一个" wi-wom-200"取自http://erikflowers.github.io/weather-icons/api-list.html,因为我使用openweathermap.com作为我的api。有关如何显示此图标的任何帮助。 Openweahtermap提供了自己的图标,但分辨率非常低。感谢



/*
    	stylesheet for weather app
    */

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


/* background color on top of bg image*/

.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 */

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

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


/* weather section */

.weather {
  border: 1px solid white;
  height: 30rem;
  margin-top: 10rem;
  /*background-color: rgba(160, 167, 187, 0.5);*/
  background-color: rgba(0, 0, 0, 0.5);
  /*background-color: rgba(213, 193, 193, 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 {
  /*border: 1px solid white;*/
  font-size: 2rem;
  /*margin-top: 2rem;*/
}

#temperature {
  /*border: 1px solid white;*/
  font-size: 7rem;
}

span {
  font-size: 3rem;
}

<!DOCTYPE html>
<html>

<head>
  <title>Weather App</title>
  <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-wind.min.css">
  <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>

<body>
  <div class="hero">
    <!-- navbar -->
    <nav class="navbar">
      <a class="navbar-brand" href="#">
        <!-- <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> -->
        <i class="fa fa-sun-o" aria-hidden="true"></i>
        <strong>Local</strong>Weather
      </a>
    </nav>

    <!-- weather section  -->
    <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-wom-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>
</body>

</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

您尚未包含图标cdn链接。使用此

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