mirror of
https://github.com/stisla/stisla.git
synced 2025-09-02 20:52:42 +02:00
2018 lines
108 KiB
HTML
2018 lines
108 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
|
|
<title>Modules › Weather Icon — Stisla</title>
|
|
|
|
<!-- General CSS Files -->
|
|
<link rel="stylesheet" href="assets/modules/bootstrap/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="assets/modules/fontawesome/css/all.min.css">
|
|
|
|
<!-- CSS Libraries -->
|
|
<link rel="stylesheet" href="assets/modules/weather-icon/css/weather-icons.min.css">
|
|
<link rel="stylesheet" href="assets/modules/weather-icon/css/weather-icons-wind.min.css">
|
|
|
|
<!-- Template CSS -->
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="assets/css/components.css">
|
|
<!-- Start GA -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-94034622-3"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'UA-94034622-3');
|
|
</script>
|
|
<!-- /END GA --></head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div class="main-wrapper main-wrapper-1">
|
|
<div class="navbar-bg"></div>
|
|
<nav class="navbar navbar-expand-lg main-navbar">
|
|
<form class="form-inline mr-auto">
|
|
<ul class="navbar-nav mr-3">
|
|
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
|
|
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
|
|
</ul>
|
|
<div class="search-element">
|
|
<input class="form-control" type="search" placeholder="Search" aria-label="Search" data-width="250">
|
|
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
|
|
<div class="search-backdrop"></div>
|
|
<div class="search-result">
|
|
<div class="search-header">
|
|
Histories
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">How to hack NASA using CSS</a>
|
|
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">Kodinger.com</a>
|
|
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">#Stisla</a>
|
|
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
|
</div>
|
|
<div class="search-header">
|
|
Result
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">
|
|
<img class="mr-3 rounded" width="30" src="assets/img/products/product-3-50.png" alt="product">
|
|
oPhone S9 Limited Edition
|
|
</a>
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">
|
|
<img class="mr-3 rounded" width="30" src="assets/img/products/product-2-50.png" alt="product">
|
|
Drone X2 New Gen-7
|
|
</a>
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">
|
|
<img class="mr-3 rounded" width="30" src="assets/img/products/product-1-50.png" alt="product">
|
|
Headphone Blitz
|
|
</a>
|
|
</div>
|
|
<div class="search-header">
|
|
Projects
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">
|
|
<div class="search-icon bg-danger text-white mr-3">
|
|
<i class="fas fa-code"></i>
|
|
</div>
|
|
Stisla Admin Template
|
|
</a>
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">
|
|
<div class="search-icon bg-primary text-white mr-3">
|
|
<i class="fas fa-laptop"></i>
|
|
</div>
|
|
Create a new Homepage Design
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<ul class="navbar-nav navbar-right">
|
|
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
|
|
<div class="dropdown-menu dropdown-list dropdown-menu-right">
|
|
<div class="dropdown-header">Messages
|
|
<div class="float-right">
|
|
<a href="#">Mark All As Read</a>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-list-content dropdown-list-message">
|
|
<a href="#" class="dropdown-item dropdown-item-unread">
|
|
<div class="dropdown-item-avatar">
|
|
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle">
|
|
<div class="is-online"></div>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>Kusnaedi</b>
|
|
<p>Hello, Bro!</p>
|
|
<div class="time">10 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item dropdown-item-unread">
|
|
<div class="dropdown-item-avatar">
|
|
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle">
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>Dedik Sugiharto</b>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
|
|
<div class="time">12 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item dropdown-item-unread">
|
|
<div class="dropdown-item-avatar">
|
|
<img alt="image" src="assets/img/avatar/avatar-3.png" class="rounded-circle">
|
|
<div class="is-online"></div>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>Agung Ardiansyah</b>
|
|
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<div class="time">12 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<div class="dropdown-item-avatar">
|
|
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle">
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>Ardian Rahardiansyah</b>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit ess</p>
|
|
<div class="time">16 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<div class="dropdown-item-avatar">
|
|
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle">
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>Alfa Zulkarnain</b>
|
|
<p>Exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
|
|
<div class="time">Yesterday</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="dropdown-footer text-center">
|
|
<a href="#">View All <i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
|
|
<div class="dropdown-menu dropdown-list dropdown-menu-right">
|
|
<div class="dropdown-header">Notifications
|
|
<div class="float-right">
|
|
<a href="#">Mark All As Read</a>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-list-content dropdown-list-icons">
|
|
<a href="#" class="dropdown-item dropdown-item-unread">
|
|
<div class="dropdown-item-icon bg-primary text-white">
|
|
<i class="fas fa-code"></i>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
Template update is available now!
|
|
<div class="time text-primary">2 Min Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<div class="dropdown-item-icon bg-info text-white">
|
|
<i class="far fa-user"></i>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>You</b> and <b>Dedik Sugiharto</b> are now friends
|
|
<div class="time">10 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<div class="dropdown-item-icon bg-success text-white">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>Kusnaedi</b> has moved task <b>Fix bug header</b> to <b>Done</b>
|
|
<div class="time">12 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<div class="dropdown-item-icon bg-danger text-white">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
Low disk space. Let's clean it!
|
|
<div class="time">17 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<div class="dropdown-item-icon bg-info text-white">
|
|
<i class="fas fa-bell"></i>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
Welcome to Stisla template!
|
|
<div class="time">Yesterday</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="dropdown-footer text-center">
|
|
<a href="#">View All <i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
|
|
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
|
|
<div class="d-sm-none d-lg-inline-block">Hi, Ujang Maman</div></a>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<div class="dropdown-title">Logged in 5 min ago</div>
|
|
<a href="features-profile.html" class="dropdown-item has-icon">
|
|
<i class="far fa-user"></i> Profile
|
|
</a>
|
|
<a href="features-activities.html" class="dropdown-item has-icon">
|
|
<i class="fas fa-bolt"></i> Activities
|
|
</a>
|
|
<a href="features-settings.html" class="dropdown-item has-icon">
|
|
<i class="fas fa-cog"></i> Settings
|
|
</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item has-icon text-danger">
|
|
<i class="fas fa-sign-out-alt"></i> Logout
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="main-sidebar sidebar-style-2">
|
|
<aside id="sidebar-wrapper">
|
|
<div class="sidebar-brand">
|
|
<a href="index.html">Stisla</a>
|
|
</div>
|
|
<div class="sidebar-brand sidebar-brand-sm">
|
|
<a href="index.html">St</a>
|
|
</div>
|
|
<ul class="sidebar-menu">
|
|
<li class="menu-header">Dashboard</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>Dashboard</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="index-0.html">General Dashboard</a></li>
|
|
<li><a class="nav-link" href="index.html">Ecommerce Dashboard</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="menu-header">Starter</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>Layout</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="layout-default.html">Default Layout</a></li>
|
|
<li><a class="nav-link" href="layout-transparent.html">Transparent Sidebar</a></li>
|
|
<li><a class="nav-link" href="layout-top-navigation.html">Top Navigation</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>Blank Page</span></a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>Bootstrap</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="bootstrap-alert.html">Alert</a></li>
|
|
<li><a class="nav-link" href="bootstrap-badge.html">Badge</a></li>
|
|
<li><a class="nav-link" href="bootstrap-breadcrumb.html">Breadcrumb</a></li>
|
|
<li><a class="nav-link" href="bootstrap-buttons.html">Buttons</a></li>
|
|
<li><a class="nav-link" href="bootstrap-card.html">Card</a></li>
|
|
<li><a class="nav-link" href="bootstrap-carousel.html">Carousel</a></li>
|
|
<li><a class="nav-link" href="bootstrap-collapse.html">Collapse</a></li>
|
|
<li><a class="nav-link" href="bootstrap-dropdown.html">Dropdown</a></li>
|
|
<li><a class="nav-link" href="bootstrap-form.html">Form</a></li>
|
|
<li><a class="nav-link" href="bootstrap-list-group.html">List Group</a></li>
|
|
<li><a class="nav-link" href="bootstrap-media-object.html">Media Object</a></li>
|
|
<li><a class="nav-link" href="bootstrap-modal.html">Modal</a></li>
|
|
<li><a class="nav-link" href="bootstrap-nav.html">Nav</a></li>
|
|
<li><a class="nav-link" href="bootstrap-navbar.html">Navbar</a></li>
|
|
<li><a class="nav-link" href="bootstrap-pagination.html">Pagination</a></li>
|
|
<li><a class="nav-link" href="bootstrap-popover.html">Popover</a></li>
|
|
<li><a class="nav-link" href="bootstrap-progress.html">Progress</a></li>
|
|
<li><a class="nav-link" href="bootstrap-table.html">Table</a></li>
|
|
<li><a class="nav-link" href="bootstrap-tooltip.html">Tooltip</a></li>
|
|
<li><a class="nav-link" href="bootstrap-typography.html">Typography</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="menu-header">Stisla</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>Components</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="components-article.html">Article</a></li> <li><a class="nav-link beep beep-sidebar" href="components-avatar.html">Avatar</a></li> <li><a class="nav-link" href="components-chat-box.html">Chat Box</a></li> <li><a class="nav-link beep beep-sidebar" href="components-empty-state.html">Empty State</a></li> <li><a class="nav-link" href="components-gallery.html">Gallery</a></li>
|
|
<li><a class="nav-link beep beep-sidebar" href="components-hero.html">Hero</a></li> <li><a class="nav-link" href="components-multiple-upload.html">Multiple Upload</a></li>
|
|
<li><a class="nav-link beep beep-sidebar" href="components-pricing.html">Pricing</a></li> <li><a class="nav-link" href="components-statistic.html">Statistic</a></li> <li><a class="nav-link" href="components-tab.html">Tab</a></li>
|
|
<li><a class="nav-link" href="components-table.html">Table</a></li>
|
|
<li><a class="nav-link" href="components-user.html">User</a></li> <li><a class="nav-link beep beep-sidebar" href="components-wizard.html">Wizard</a></li> </ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>Forms</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="forms-advanced-form.html">Advanced Form</a></li>
|
|
<li><a class="nav-link" href="forms-editor.html">Editor</a></li>
|
|
<li><a class="nav-link" href="forms-validation.html">Validation</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-map-marker-alt"></i> <span>Google Maps</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="gmaps-advanced-route.html">Advanced Route</a></li>
|
|
<li><a href="gmaps-draggable-marker.html">Draggable Marker</a></li>
|
|
<li><a href="gmaps-geocoding.html">Geocoding</a></li>
|
|
<li><a href="gmaps-geolocation.html">Geolocation</a></li>
|
|
<li><a href="gmaps-marker.html">Marker</a></li>
|
|
<li><a href="gmaps-multiple-marker.html">Multiple Marker</a></li>
|
|
<li><a href="gmaps-route.html">Route</a></li>
|
|
<li><a href="gmaps-simple.html">Simple</a></li>
|
|
</ul>
|
|
</li> <li class="dropdown active">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>Modules</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="modules-calendar.html">Calendar</a></li>
|
|
<li><a class="nav-link" href="modules-chartjs.html">ChartJS</a></li>
|
|
<li><a class="nav-link" href="modules-datatables.html">DataTables</a></li>
|
|
<li><a class="nav-link" href="modules-flag.html">Flag</a></li>
|
|
<li><a class="nav-link" href="modules-font-awesome.html">Font Awesome</a></li>
|
|
<li><a class="nav-link" href="modules-ion-icons.html">Ion Icons</a></li>
|
|
<li><a class="nav-link" href="modules-owl-carousel.html">Owl Carousel</a></li>
|
|
<li><a class="nav-link" href="modules-sparkline.html">Sparkline</a></li>
|
|
<li><a class="nav-link" href="modules-sweet-alert.html">Sweet Alert</a></li>
|
|
<li><a class="nav-link" href="modules-toastr.html">Toastr</a></li>
|
|
<li><a class="nav-link" href="modules-vector-map.html">Vector Map</a></li>
|
|
<li class=active><a class="nav-link" href="modules-weather-icon.html">Weather Icon</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="menu-header">Pages</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>Auth</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="auth-forgot-password.html">Forgot Password</a></li>
|
|
<li><a href="auth-login.html">Login</a></li>
|
|
<li><a href="auth-register.html">Register</a></li>
|
|
<li><a href="auth-reset-password.html">Reset Password</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>Errors</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="errors-503.html">503</a></li>
|
|
<li><a class="nav-link" href="errors-403.html">403</a></li>
|
|
<li><a class="nav-link" href="errors-404.html">404</a></li>
|
|
<li><a class="nav-link" href="errors-500.html">500</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-bicycle"></i> <span>Features</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="features-activities.html">Activities</a></li>
|
|
<li><a class="nav-link" href="features-post-create.html">Post Create</a></li>
|
|
<li><a class="nav-link" href="features-posts.html">Posts</a></li>
|
|
<li><a class="nav-link" href="features-profile.html">Profile</a></li>
|
|
<li><a class="nav-link" href="features-settings.html">Settings</a></li>
|
|
<li><a class="nav-link" href="features-setting-detail.html">Setting Detail</a></li>
|
|
<li><a class="nav-link" href="features-tickets.html">Tickets</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-ellipsis-h"></i> <span>Utilities</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="utilities-contact.html">Contact</a></li>
|
|
<li><a class="nav-link" href="utilities-invoice.html">Invoice</a></li>
|
|
<li><a href="utilities-subscribe.html">Subscribe</a></li>
|
|
</ul>
|
|
</li> <li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>Credits</span></a></li>
|
|
</ul>
|
|
|
|
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
|
|
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
|
|
<i class="fas fa-rocket"></i> Documentation
|
|
</a>
|
|
</div> </aside>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h1>Weather Icon</h1>
|
|
<div class="section-header-breadcrumb">
|
|
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
|
<div class="breadcrumb-item"><a href="#">Modules</a></div>
|
|
<div class="breadcrumb-item">Weather Icon</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-body">
|
|
<h2 class="section-title">Weather Icon</h2>
|
|
<p class="section-lead">
|
|
We also added 'Weather Icons' to make it easier for you to display weather icons. This library was created by @erikflowers
|
|
</p>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Weather Icons</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row new-icons">
|
|
<div class="col-sm-12">
|
|
<div class="section-title mt-0">25 New 2.0 Icons!</div>
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
<ul>
|
|
<li><i class="wi wi-day-cloudy-high"></i>day-cloudy-high</li>
|
|
<li><i class="wi wi-day-light-wind"></i>day-light-wind</li>
|
|
<li><i class="wi wi-day-sleet"></i>day-sleet</li>
|
|
<li><i class="wi wi-day-haze"></i>day-haze</li>
|
|
<li><i class="wi wi-night-cloudy-high"></i>night-cloud-high</li>
|
|
<li><i class="wi wi-night-alt-partly-cloudy"></i>night-alt-partly-cloudy</li>
|
|
<li><i class="wi wi-sleet"></i>sleet</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<ul>
|
|
<li><i class="wi wi-moonrise"></i>moonrise</li>
|
|
<li><i class="wi wi-moonset"></i>moonset</li>
|
|
<li><i class="wi wi-night-sleet"></i>night-sleet</li>
|
|
<li><i class="wi wi-night-alt-sleet"></i>night-alt-sleet</li>
|
|
<li><i class="wi wi-raindrop"></i>raindrop</li>
|
|
<li><i class="wi wi-barometer"></i>barometer</li>
|
|
<li><i class="wi wi-humidity"></i>humidity</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<ul>
|
|
<li><i class="wi wi-na"></i>na (no report)</li>
|
|
<li><i class="wi wi-flood"></i>flood</li>
|
|
<li><i class="wi wi-sandstorm"></i>sandstorm</li>
|
|
<li><i class="wi wi-tsunami"></i>tsunami</li>
|
|
<li><i class="wi wi-earthquake"></i>earthquake</li>
|
|
<li><i class="wi wi-fire"></i>fire</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<ul>
|
|
<li><i class="wi wi-volcano"></i>volcano</li>
|
|
<li><i class="wi wi-train"></i>train</li>
|
|
<li><i class="wi wi-small-craft-advisory"></i>small-craft-advisory</li>
|
|
<li><i class="wi wi-gale-warning"></i>gale-warning</li>
|
|
<li><i class="wi wi-storm-warning"></i>storm-warning</li>
|
|
<li><i class="wi wi-hurricane-warning"></i>hurricane-warning</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12 icon-set">
|
|
<div class="section-title">Daytime</div>
|
|
<div class="row">
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-sunny</div>
|
|
<div class="icon_unicode">f00d </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-cloudy</div>
|
|
<div class="icon_unicode">f002 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-cloudy-gusts</div>
|
|
<div class="icon_unicode">f000 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-cloudy-windy</div>
|
|
<div class="icon_unicode">f001 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-fog</div>
|
|
<div class="icon_unicode">f003 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-hail</div>
|
|
<div class="icon_unicode">f004 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-haze</div>
|
|
<div class="icon_unicode">f0b6 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-lightning</div>
|
|
<div class="icon_unicode">f005 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-rain</div>
|
|
<div class="icon_unicode">f008 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-rain-mix</div>
|
|
<div class="icon_unicode">f006 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-rain-wind</div>
|
|
<div class="icon_unicode">f007 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-showers</div>
|
|
<div class="icon_unicode">f009 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-sleet</div>
|
|
<div class="icon_unicode">f0b2 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-sleet-storm</div>
|
|
<div class="icon_unicode">f068 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-snow</div>
|
|
<div class="icon_unicode">f00a </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-snow-thunderstorm</div>
|
|
<div class="icon_unicode">f06b </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-snow-wind</div>
|
|
<div class="icon_unicode">f065 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-sprinkle</div>
|
|
<div class="icon_unicode">f00b </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-storm-showers</div>
|
|
<div class="icon_unicode">f00e </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-sunny-overcast</div>
|
|
<div class="icon_unicode">f00c </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-thunderstorm</div>
|
|
<div class="icon_unicode">f010 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-windy</div>
|
|
<div class="icon_unicode">f085 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-solar-eclipse</div>
|
|
<div class="icon_unicode">f06e </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-hot</div>
|
|
<div class="icon_unicode">f072 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-cloudy-high</div>
|
|
<div class="icon_unicode">f07d </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-day-light-wind</div>
|
|
<div class="icon_unicode">f0c4 </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 icon-set">
|
|
<div class="section-title">Nighttime</div>
|
|
<div class="row">
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-clear</div>
|
|
<div class="icon_unicode">f02e </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-cloudy</div>
|
|
<div class="icon_unicode">f086 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-cloudy-gusts</div>
|
|
<div class="icon_unicode">f022 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-cloudy-windy</div>
|
|
<div class="icon_unicode">f023 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-hail</div>
|
|
<div class="icon_unicode">f024 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-lightning</div>
|
|
<div class="icon_unicode">f025 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-rain</div>
|
|
<div class="icon_unicode">f028 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-rain-mix</div>
|
|
<div class="icon_unicode">f026 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-rain-wind</div>
|
|
<div class="icon_unicode">f027 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-showers</div>
|
|
<div class="icon_unicode">f029 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-sleet</div>
|
|
<div class="icon_unicode">f0b4 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-sleet-storm</div>
|
|
<div class="icon_unicode">f06a </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-snow</div>
|
|
<div class="icon_unicode">f02a </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-snow-thunderstorm</div>
|
|
<div class="icon_unicode">f06d </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-snow-wind</div>
|
|
<div class="icon_unicode">f067 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-sprinkle</div>
|
|
<div class="icon_unicode">f02b </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-storm-showers</div>
|
|
<div class="icon_unicode">f02c </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-thunderstorm</div>
|
|
<div class="icon_unicode">f02d </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-cloudy</div>
|
|
<div class="icon_unicode">f031 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-cloudy-gusts</div>
|
|
<div class="icon_unicode">f02f </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-cloudy-windy</div>
|
|
<div class="icon_unicode">f030 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-fog</div>
|
|
<div class="icon_unicode">f04a </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-hail</div>
|
|
<div class="icon_unicode">f032 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-lightning</div>
|
|
<div class="icon_unicode">f033 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-partly-cloudy</div>
|
|
<div class="icon_unicode">f083 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-rain</div>
|
|
<div class="icon_unicode">f036 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-rain-mix</div>
|
|
<div class="icon_unicode">f034 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-rain-wind</div>
|
|
<div class="icon_unicode">f035 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-showers</div>
|
|
<div class="icon_unicode">f037 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-sleet</div>
|
|
<div class="icon_unicode">f0b3 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-sleet-storm</div>
|
|
<div class="icon_unicode">f069 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-snow</div>
|
|
<div class="icon_unicode">f038 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-snow-thunderstorm</div>
|
|
<div class="icon_unicode">f06c </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-snow-wind</div>
|
|
<div class="icon_unicode">f066 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-sprinkle</div>
|
|
<div class="icon_unicode">f039 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-storm-showers</div>
|
|
<div class="icon_unicode">f03a </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-thunderstorm</div>
|
|
<div class="icon_unicode">f03b </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-lunar-eclipse</div>
|
|
<div class="icon_unicode">f070 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-stars</div>
|
|
<div class="icon_unicode">f077 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-storm-showers</div>
|
|
<div class="icon_unicode">f01d </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-thunderstorm</div>
|
|
<div class="icon_unicode">f01e </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-cloudy-high</div>
|
|
<div class="icon_unicode">f07e </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-cloudy-high</div>
|
|
<div class="icon_unicode">f080 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-night-alt-partly-cloudy</div>
|
|
<div class="icon_unicode">f081 </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 icon-set">
|
|
<div class="section-title">Neutral</div>
|
|
<div class="row">
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-cloud</div>
|
|
<div class="icon_unicode">f041 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-cloudy</div>
|
|
<div class="icon_unicode">f013 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-cloudy-gusts</div>
|
|
<div class="icon_unicode">f011 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-cloudy-windy</div>
|
|
<div class="icon_unicode">f012 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-fog</div>
|
|
<div class="icon_unicode">f014 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-hail</div>
|
|
<div class="icon_unicode">f015 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-rain</div>
|
|
<div class="icon_unicode">f019 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-rain-mix</div>
|
|
<div class="icon_unicode">f017 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-rain-wind</div>
|
|
<div class="icon_unicode">f018 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-showers</div>
|
|
<div class="icon_unicode">f01a </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-sleet</div>
|
|
<div class="icon_unicode">f0b5 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-snow</div>
|
|
<div class="icon_unicode">f01b </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-sprinkle</div>
|
|
<div class="icon_unicode">f01c </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-storm-showers</div>
|
|
<div class="icon_unicode">f01d </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-thunderstorm</div>
|
|
<div class="icon_unicode">f01e </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-snow-wind</div>
|
|
<div class="icon_unicode">f064 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-snow</div>
|
|
<div class="icon_unicode">f01b </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-smog</div>
|
|
<div class="icon_unicode">f074 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-smoke</div>
|
|
<div class="icon_unicode">f062 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-lightning</div>
|
|
<div class="icon_unicode">f016 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-raindrops</div>
|
|
<div class="icon_unicode">f04e </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-raindrop</div>
|
|
<div class="icon_unicode">f078 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-dust</div>
|
|
<div class="icon_unicode">f063 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-snowflake-cold</div>
|
|
<div class="icon_unicode">f076 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-windy</div>
|
|
<div class="icon_unicode">f021 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-strong-wind</div>
|
|
<div class="icon_unicode">f050 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-sandstorm</div>
|
|
<div class="icon_unicode">f082 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-earthquake</div>
|
|
<div class="icon_unicode">f0c6 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-fire</div>
|
|
<div class="icon_unicode">f0c7 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-flood</div>
|
|
<div class="icon_unicode">f07c </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-meteor</div>
|
|
<div class="icon_unicode">f071 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-tsunami</div>
|
|
<div class="icon_unicode">f0c5 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-volcano</div>
|
|
<div class="icon_unicode">f0c8 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-hurricane</div>
|
|
<div class="icon_unicode">f073 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-tornado</div>
|
|
<div class="icon_unicode">f056 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-small-craft-advisory</div>
|
|
<div class="icon_unicode">f0cc </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-gale-warning</div>
|
|
<div class="icon_unicode">f0cd </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-storm-warning</div>
|
|
<div class="icon_unicode">f0ce </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-hurricane-warning</div>
|
|
<div class="icon_unicode">f0cf </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-direction</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 icon-set">
|
|
<div class="section-title">Miscellaneous</div>
|
|
<div class="row">
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-alien</div>
|
|
<div class="icon_unicode">f075 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-celsius</div>
|
|
<div class="icon_unicode">f03c </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-fahrenheit</div>
|
|
<div class="icon_unicode">f045 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-degrees</div>
|
|
<div class="icon_unicode">f042 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-thermometer</div>
|
|
<div class="icon_unicode">f055 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-thermometer-exterior</div>
|
|
<div class="icon_unicode">f053 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-thermometer-internal</div>
|
|
<div class="icon_unicode">f054 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-cloud-down</div>
|
|
<div class="icon_unicode">f03d </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-cloud-up</div>
|
|
<div class="icon_unicode">f040 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-cloud-refresh</div>
|
|
<div class="icon_unicode">f03e </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-horizon</div>
|
|
<div class="icon_unicode">f047 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-horizon-alt</div>
|
|
<div class="icon_unicode">f046 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-sunrise</div>
|
|
<div class="icon_unicode">f051 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-sunset</div>
|
|
<div class="icon_unicode">f052 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moonrise</div>
|
|
<div class="icon_unicode">f0c9 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moonset</div>
|
|
<div class="icon_unicode">f0ca </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-refresh</div>
|
|
<div class="icon_unicode">f04c </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-refresh-alt</div>
|
|
<div class="icon_unicode">f04b </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-umbrella</div>
|
|
<div class="icon_unicode">f084 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-barometer</div>
|
|
<div class="icon_unicode">f079 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-humidity</div>
|
|
<div class="icon_unicode">f07a </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-na</div>
|
|
<div class="icon_unicode">f07b </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-train</div>
|
|
<div class="icon_unicode">f0cb </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 icon-set">
|
|
<div class="section-title">Moon Phases</div>
|
|
<div class="alert alert-primary alert-has-icon">
|
|
<div class="alert-icon"><i class="fa fa-info-circle"></i></div>
|
|
<div class="alert-body">
|
|
<p>The moons are split into 28 icons, to correspond neatly with the 28 day moon cycle. There is a primary set and alternate set. The primary set is meant to be interpreted as: where there are pixels, that is the illuminated part of the moon. The alternate set is meant to be interpreted as: where there are pixels, that is the shadowed part of the moon.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-new</div>
|
|
<div class="icon_unicode">f095 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waxing-crescent-1</div>
|
|
<div class="icon_unicode">f096 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waxing-crescent-2</div>
|
|
<div class="icon_unicode">f097 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waxing-crescent-3</div>
|
|
<div class="icon_unicode">f098 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waxing-crescent-4</div>
|
|
<div class="icon_unicode">f099 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waxing-crescent-5</div>
|
|
<div class="icon_unicode">f09a </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waxing-crescent-6</div>
|
|
<div class="icon_unicode">f09b </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-first-quarter</div>
|
|
<div class="icon_unicode">f09c </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waxing-gibbous-1</div>
|
|
<div class="icon_unicode">f09d </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waxing-gibbous-2</div>
|
|
<div class="icon_unicode">f09e </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waxing-gibbous-3</div>
|
|
<div class="icon_unicode">f09f </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waxing-gibbous-4</div>
|
|
<div class="icon_unicode">f0a0 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waxing-gibbous-5</div>
|
|
<div class="icon_unicode">f0a1 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waxing-gibbous-6</div>
|
|
<div class="icon_unicode">f0a2 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-full</div>
|
|
<div class="icon_unicode">f0a3 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waning-gibbous-1</div>
|
|
<div class="icon_unicode">f0a4 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waning-gibbous-2</div>
|
|
<div class="icon_unicode">f0a5 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waning-gibbous-3</div>
|
|
<div class="icon_unicode">f0a6 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waning-gibbous-4</div>
|
|
<div class="icon_unicode">f0a7 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waning-gibbous-5</div>
|
|
<div class="icon_unicode">f0a8 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waning-gibbous-6</div>
|
|
<div class="icon_unicode">f0a9 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-third-quarter</div>
|
|
<div class="icon_unicode">f0aa </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waning-crescent-1</div>
|
|
<div class="icon_unicode">f0ab </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waning-crescent-2</div>
|
|
<div class="icon_unicode">f0ac </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waning-crescent-3</div>
|
|
<div class="icon_unicode">f0ad </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waning-crescent-4</div>
|
|
<div class="icon_unicode">f0ae </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waning-crescent-5</div>
|
|
<div class="icon_unicode">f0af </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-waning-crescent-6</div>
|
|
<div class="icon_unicode">f0b0 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-new</div>
|
|
<div class="icon_unicode">f0eb </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waxing-crescent-1</div>
|
|
<div class="icon_unicode">f0d0 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waxing-crescent-2</div>
|
|
<div class="icon_unicode">f0d1 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waxing-crescent-3</div>
|
|
<div class="icon_unicode">f0d2 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waxing-crescent-4</div>
|
|
<div class="icon_unicode">f0d3 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waxing-crescent-5</div>
|
|
<div class="icon_unicode">f0d4 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waxing-crescent-6</div>
|
|
<div class="icon_unicode">f0d5 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-first-quarter</div>
|
|
<div class="icon_unicode">f0d6 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waxing-gibbous-1</div>
|
|
<div class="icon_unicode">f0d7 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waxing-gibbous-2</div>
|
|
<div class="icon_unicode">f0d8 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waxing-gibbous-3</div>
|
|
<div class="icon_unicode">f0d9 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waxing-gibbous-4</div>
|
|
<div class="icon_unicode">f0da </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waxing-gibbous-5</div>
|
|
<div class="icon_unicode">f0db </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waxing-gibbous-6</div>
|
|
<div class="icon_unicode">f0dc </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-full</div>
|
|
<div class="icon_unicode">f0dd </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waning-gibbous-1</div>
|
|
<div class="icon_unicode">f0de </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waning-gibbous-2</div>
|
|
<div class="icon_unicode">f0df </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waning-gibbous-3</div>
|
|
<div class="icon_unicode">f0e0 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waning-gibbous-4</div>
|
|
<div class="icon_unicode">f0e1 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waning-gibbous-5</div>
|
|
<div class="icon_unicode">f0e2 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waning-gibbous-6</div>
|
|
<div class="icon_unicode">f0e3 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-third-quarter</div>
|
|
<div class="icon_unicode">f0e4 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waning-crescent-1</div>
|
|
<div class="icon_unicode">f0e5 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waning-crescent-2</div>
|
|
<div class="icon_unicode">f0e6 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waning-crescent-3</div>
|
|
<div class="icon_unicode">f0e7 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waning-crescent-4</div>
|
|
<div class="icon_unicode">f0e8 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waning-crescent-5</div>
|
|
<div class="icon_unicode">f0e9 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-moon-alt-waning-crescent-6</div>
|
|
<div class="icon_unicode">f0ea </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 icon-set">
|
|
<div class="section-title">Time</div>
|
|
<div class="row">
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-time-1</div>
|
|
<div class="icon_unicode">f08a </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-time-2</div>
|
|
<div class="icon_unicode">f08b </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-time-3</div>
|
|
<div class="icon_unicode">f08c </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-time-4</div>
|
|
<div class="icon_unicode">f08d </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-time-5</div>
|
|
<div class="icon_unicode">f08e </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-time-6</div>
|
|
<div class="icon_unicode">f08f </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-time-7</div>
|
|
<div class="icon_unicode">f090 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-time-8</div>
|
|
<div class="icon_unicode">f091 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-time-9</div>
|
|
<div class="icon_unicode">f092 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-time-10</div>
|
|
<div class="icon_unicode">f093 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-time-11</div>
|
|
<div class="icon_unicode">f094 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-time-12</div>
|
|
<div class="icon_unicode">f089 </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 icon-set">
|
|
<div class="section-title">Directional Arrows</div>
|
|
<div class="row">
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-direction-up</div>
|
|
<div class="icon_unicode">f058 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-direction-up-right</div>
|
|
<div class="icon_unicode">f057 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-direction-right</div>
|
|
<div class="icon_unicode">f04d </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-direction-down-right</div>
|
|
<div class="icon_unicode">f088 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-direction-down</div>
|
|
<div class="icon_unicode">f044 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-direction-down-left</div>
|
|
<div class="icon_unicode">f043 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-direction-left</div>
|
|
<div class="icon_unicode">f048 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-direction-up-left</div>
|
|
<div class="icon_unicode">f087 </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 icon-set">
|
|
<div class="section-title">Wind Degree Examples</div>
|
|
<div class="alert alert-primary alert-has-icon">
|
|
<div class="alert-icon"><i class="fa fa-info-circle"></i></div>
|
|
<div class="alert-body">
|
|
<p>The classes for the wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the degree, zero at the top. From points directly away from the degree. This means, if you want the indicator to represent "wind is coming from the south", you can use the <code>towards-0-deg</code> class, or if you prefer to use from, then you would use <code>from-180-deg</code>.</p>
|
|
<p>There are 360 classes for each in 1 degree increments for maximum precision.</p>
|
|
<p></p>
|
|
<p>To make a wind icon appear, you need to add 3 classes, the base icon class, the wind icon class, and then the direction you want it to face: <code>class="wi wi-wind towards-23-deg"</code></p>
|
|
|
|
<p></p>
|
|
<p>NOTE: You must include the additional stylesheeet, <code>weather-icons-wind.css</code> to use the wind icons and API mappings.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-0-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-0-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-23-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-23-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-45-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-45-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-68-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-68-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-90-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-90-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-113-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-113-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-135-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-135-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-158-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-158-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-180-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-180-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-203-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-203-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-225-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-225-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-248-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-248-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-270-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-270-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-293-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-293-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-313-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-313-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind towards-336-deg"></i>
|
|
</div>
|
|
<div class="icon-name">towards-336-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-180-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-180-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-203-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-203-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-225-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-225-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-248-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-248-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-270-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-270-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-293-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-293-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-313-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-313-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-336-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-336-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-0-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-0-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-23-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-23-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-45-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-45-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-68-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-68-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-90-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-90-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-113-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-113-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-135-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-135-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind from-158-deg"></i>
|
|
</div>
|
|
<div class="icon-name">from-158-deg</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 icon-set">
|
|
<div class="section-title">Wind Cardinal Examples</div>
|
|
<div class="alert alert-primary alert-has-icon">
|
|
<div class="alert-icon"><i class="fa fa-info-circle"></i></div>
|
|
<div class="alert-body">
|
|
<p>The classes for the cardinal wind direction indicator is split into 2 options. You can choose towards or from. Towards points to the direction in the class, north at the top. From points directly away from the direction in the class. This means, if you want the indicator to represent "wind is coming from the south", you can use the <code>towards-n</code> class, or if you prefer to use from, then you would use <code>from-s</code>.</p>
|
|
<p>The purpose of this is to accommodate applications that prefer to point to where the wind is originating from (arrow points against the wind), or pointing where the wind is blowing (arrow points in direction of wind). You can decide which fits your application best and use the class that matches.</p>
|
|
<p>There are 16 classes each for precision when using cardinal directions.</p>
|
|
<p></p>
|
|
<p>To make a wind icon appear, you need to add 3 classes, the base icon class, the wind icon class, and then the direction you want it to face: <code>class="wi wi-wind wi-from-e"</code></p>
|
|
<p>NOTE: You must include the additional stylesheeet, <code>weather-icons-wind.css</code> to use the wind icons and API mappings.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-n"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-n</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-nne"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-nne</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-ne"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-ne</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-ene"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-ene</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-e"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-e</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-ese"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-ese</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-se"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-se</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-sse"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-sse</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-s"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-s</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-ssw"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-ssw</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-sw"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-sw</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-wsw"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-wsw</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-w"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-w</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-wnw"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-wnw</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-nw"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-nw</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-towards-nnw"></i>
|
|
</div>
|
|
<div class="icon-name">wi-towards-nnw</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-n"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-n</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-nne"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-nne</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-ne"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-ne</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-ene"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-ene</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-e"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-e</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-ese"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-ese</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-se"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-se</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-sse"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-sse</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-s"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-s</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-ssw"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-ssw</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-sw"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-sw</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-wsw"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-wsw</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-w"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-w</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-wnw"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-wnw</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-nw"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-nw</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
<div class="icon-wrap"><div class="icon"><i class="wi wi-wind wi-from-nnw"></i>
|
|
</div>
|
|
<div class="icon-name">wi-from-nnw</div>
|
|
<div class="icon_unicode">f0b1 </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 icon-set">
|
|
<div class="section-title">Beaufort Wind Scale</div>
|
|
<div class="row">
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-beaufort-0</div>
|
|
<div class="icon_unicode">f0b7 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-beaufort-1</div>
|
|
<div class="icon_unicode">f0b8 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-beaufort-2</div>
|
|
<div class="icon_unicode">f0b9 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-beaufort-3</div>
|
|
<div class="icon_unicode">f0ba </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-beaufort-4</div>
|
|
<div class="icon_unicode">f0bb </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-beaufort-5</div>
|
|
<div class="icon_unicode">f0bc </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-beaufort-6</div>
|
|
<div class="icon_unicode">f0bd </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-beaufort-7</div>
|
|
<div class="icon_unicode">f0be </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-beaufort-8</div>
|
|
<div class="icon_unicode">f0bf </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-beaufort-9</div>
|
|
<div class="icon_unicode">f0c0 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-beaufort-10</div>
|
|
<div class="icon_unicode">f0c1 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-beaufort-11</div>
|
|
<div class="icon_unicode">f0c2 </div>
|
|
</div>
|
|
<div class="icon-wrap">
|
|
<div class="icon"></div>
|
|
<div class="icon-name">wi-wind-beaufort-12</div>
|
|
<div class="icon_unicode">f0c3 </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<footer class="main-footer">
|
|
<div class="footer-left">
|
|
Copyright © 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
|
|
</div>
|
|
<div class="footer-right">
|
|
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- General JS Scripts -->
|
|
<script src="assets/modules/jquery.min.js"></script>
|
|
<script src="assets/modules/popper.js"></script>
|
|
<script src="assets/modules/tooltip.js"></script>
|
|
<script src="assets/modules/bootstrap/js/bootstrap.min.js"></script>
|
|
<script src="assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
|
|
<script src="assets/modules/moment.min.js"></script>
|
|
<script src="assets/js/stisla.js"></script>
|
|
|
|
<!-- JS Libraies -->
|
|
|
|
<!-- Page Specific JS File -->
|
|
|
|
<!-- Template JS File -->
|
|
<script src="assets/js/scripts.js"></script>
|
|
<script src="assets/js/custom.js"></script>
|
|
</body>
|
|
</html> |