erikflowers / weather-icons

215 Weather Themed Icons and CSS
https://github.com/erikflowers/weather-icons
6.92k stars 851 forks source link

HELP! #245

Closed SPCcleveland9035 closed 3 years ago

SPCcleveland9035 commented 3 years ago

I cant get the icons to show up, and I think I might be doing it wrong. Please help me out. My contact info: Email: thegoon8511@gmail.cpm | Discord: SPCcleveland9035#6522. Have a great day! Screenshot 2021-05-03 19 25 26 Screenshot 2021-05-03 19 24  @20

rdipardo commented 3 years ago

The icons depend on static font assets for display:

https://github.com/erikflowers/weather-icons/blob/c78b6af3853239d36e0dd7fa056d484b42ddd461/css/weather-icons.css#L25

You have to save the fonts to a font directory alongside the style-sheets, like this:

├── css
│   ├── weather-icons.min.css
│   └── weather-icons-wind.min.css
├── font
│   ├── weathericons-regular-webfont.eot
│   ├── weathericons-regular-webfont.svg
│   ├── weathericons-regular-webfont.ttf
│   ├── weathericons-regular-webfont.woff
│   └── weathericons-regular-webfont.woff2
└── index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Weather Icons Demo</title>
<link rel="stylesheet" type="text/css" href="css/weather-icons.min.css"/>
<link rel="stylesheet" type="text/css" href="css/weather-icons-wind.min.css"/>
</head>

<body>
<table border="1"></table>
<h1>Weather Icons</h1>
<i class="wi wi-night-sleet"></i>
</body>

</html>

Screenshot_2021-05-16_22-24-35

SPCcleveland9035 commented 3 years ago

Oh, that makes more sense, thank you.