问题
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/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css the icon has a class of "wi-wom-200" taken from http://erikflowers.github.io/weather-icons/api-list.html since I'm using openweathermap.com for my api. Any help on how to display this icon. Openweahtermap provides their own icons, but very low resolution. Thanks
/*
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>回答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);
}
.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>来源：https://stackoverflow.com/questions/49211070/how-can-i-use-weather-icons-on-my-weather-application