Further rotation update

* Add further aliases to rotations

* Add description for Cardinal aliases

* Update package.json

* Update weather-icons-lite.min.css

* Further rotations added

* Update weather-icons-lite.css

* Update weather-icons-lite.css

* A couple of typos

* Add arrow and direction css

* Add arrow & direction images

* Add rotation degrees

* Add arrow & direction

* Update weather-icons-lite.min.css

Co-authored-by: thomasvjohansen <tvj@vgraphics.dk>

README.md

@@ -42,9 +42,9 @@ Example of changing icon colour; `<i class="wi wi-darksky-clear-day" style="colo
 
 #### Rotating icons
 
-Weather-Icons & Font Awsome icons can also be flipped or rotated, using any of the modifiers; `wi-flip-vertical`, `wi-flip-horizontal`, and `wi-rotate-23`, `wi-rotate-45`, `wi-rotate-90`, `wi-rotate-135`, `wi-rotate-180`, `wi-rotate-225`, `wi-rotate-270`, `wi-rotate-315`  
+Weather-Icons & Font Awsome icons can also be flipped or rotated, using any of the modifiers; `wi-flip-vertical`, `wi-flip-horizontal`, and `wi-rotate-23`, `wi-rotate-45` etc (including angles 23, 45, 68, 90, 133, 135, 158, 180, 203, 225, 248, 270, 293, 315, 338, 0).
 
-Cardinal & Ordinal references can also be used - `wi-rotate-NE`, `wi-rotate-E`(which will rotate the icons for example NE = 45 deg clockwise).  
+Cardinal & Ordinal references can also be used - `wi-rotate-NE`, `wi-towards-WNW` & `wi-from-ESE` (all of which will rotate the icons clockwise).  
 
 Example of icon rotation; `<i class="wi wi-wu-partlycloudy wi-rotate-270"></i>`
 

css/weather-icons-lite.css

@@ -1,5 +1,5 @@
 /*!
- * Weather Icons Lite v1.5.0
+ * Weather Icons Lite v1.6.0
  * Weather themed icons for Bootstrap
  * Author - Paul Reed
  * Maintained at https://github.com/Paul-Reed/weather-icons-lite
@@ -70,54 +70,89 @@
   text-align: center;
   width: 1.4em;
 }
-.wi-rotate-N {
+.wi-rotate-0,.wi-rotate-N,.wi-towards-N,.wi-from-S {
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
-.wi-rotate-23 {
+.wi-rotate-23,.wi-rotate-NNE,.wi-towards-NNE,.wi-from-SSW {
   -webkit-transform: rotate(23deg);
   -ms-transform: rotate(23deg);
   transform: rotate(23deg);
 }
-.wi-rotate-45,.wi-rotate-NE {
+.wi-rotate-45,.wi-rotate-NE,.wi-towards-NE,.wi-from-SW {
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }
-.wi-rotate-90,.wi-rotate-E {
+.wi-rotate-68,.wi-rotate-ENE,.wi-towards-ENE,.wi-from-WSW {
+  -webkit-transform: rotate(68deg);
+  -ms-transform: rotate(68deg);
+  transform: rotate(68deg);
+}
+.wi-rotate-90,.wi-rotate-E,.wi-towards-E,.wi-from-W {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
   -webkit-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
-.wi-rotate-135,.wi-rotate-SE {
+.wi-rotate-113,.wi-rotate-ESE,.wi-towards-ESE,.wi-from-WNW { 
+  -webkit-transform: rotate(113deg);
+  -ms-transform: rotate(113deg);
+  transform: rotate(113deg);
+}
+.wi-rotate-135,.wi-rotate-SE,.wi-towards-SE,.wi-from-NW { 
   -webkit-transform: rotate(135deg);
   -ms-transform: rotate(135deg);
   transform: rotate(135deg);
 }
-.wi-rotate-180,.wi-rotate-S {
+.wi-rotate-158,.wi-rotate-SSE,.wi-towards-SSE,.wi-from-NNW { 
+  -webkit-transform: rotate(158deg);
+  -ms-transform: rotate(158deg);
+  transform: rotate(158deg);
+}
+.wi-rotate-180,.wi-rotate-S,.wi-towards-S,.wi-from-N {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }
-.wi-rotate-225,.wi-rotate-SW {
+.wi-rotate-203,.wi-rotate-SSW,.wi-towards-SSW,.wi-from-NNE {
+  -webkit-transform: rotate(203deg);
+  -ms-transform: rotate(203deg);
+  transform: rotate(203deg);
+}
+.wi-rotate-225,.wi-rotate-SW.wi-towards-SW,.wi-from-NE {
   -webkit-transform: rotate(225deg);
   -ms-transform: rotate(225deg);
   transform: rotate(225deg);
 }
-.wi-rotate-270,.wi-rotate-W {
+.wi-rotate-248,.wi-rotate-WSW.wi-towards-WSW,.wi-from-ENE {
+  -webkit-transform: rotate(248deg);
+  -ms-transform: rotate(248deg);
+  transform: rotate(248deg);
+}
+.wi-rotate-270,.wi-rotate-W,.wi-towards-W,.wi-from-E{
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
   -webkit-transform: rotate(270deg);
   -ms-transform: rotate(270deg);
   transform: rotate(270deg);
 }
-.wi-rotate-315,.wi-rotate-NW {
+.wi-rotate-293,.wi-rotate-WNW.wi-towards-WNW,.wi-from-ESE {
+  -webkit-transform: rotate(293deg);
+  -ms-transform: rotate(293deg);
+  transform: rotate(293deg);
+}
+.wi-rotate-315,.wi-rotate-NW,.wi-towards-NW,.wi-from-SE {
   -webkit-transform: rotate(315deg);
   -ms-transform: rotate(315deg);
   transform: rotate(315deg);
 }
+.wi-rotate-338,.wi-rotate-NNW,.wi-towards-NNW,.wi-from-SSE {
+  -webkit-transform: rotate(338deg);
+  -ms-transform: rotate(338deg);
+  transform: rotate(338deg);
+}
 .wi-flip-horizontal {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, 
 mirror=1);
@@ -131,6 +166,12 @@ mirror=1);
   -ms-transform: scale(1, -1);
   transform: scale(1, -1);
 }
+.wi-arrow:before {
+  content: "\f0d2";
+}
+.wi-direction:before {
+  content: "\f0d1";
+}
 .wi-darksky-clear-day:before {
   content: "\f00d";
 }

css_mappings.md

@@ -44,3 +44,9 @@
 | wi-moon-wan-cres               | f0e0      |   ![](images/moon4.JPG)   |
 
 **NOTE** - Because the Moon icons are representative of a 'physical moon', it is necessary to have an additional version for the dark theme, to avoid the icon colour becoming inverted. The dark theme version is obtained by adding `-dark` to the CSS code. For example to get the full moon (light theme version) the code would be `wi-moon-full`, whilst the same icon for a dark theme, the CSS code would be `wi-moon-full-dark`.
+
+# Direction pointers
+| CSS Code                                                 | Icon Name |           icon           |
+| :-------------------------- | :-------- | :----------------------: |
+| wi-arrow                    | f0d1      |   ![](images/f0d1.JPG)   |
+| wi-direction                | f0d2      |   ![](images/f0d2.JPG)   |

package.json

@@ -1,6 +1,6 @@
 {
     "name" : "weather-icons-lite",
-    "version" : "1.5.0",
+    "version" : "1.6.0",
     "description" : "A lightweight set of weather icons",
     "dependencies" : {
     },

xml/weather-icons-lite.xml

@@ -86,5 +86,6 @@
 <string name="wi-moon-third-quart">&#xf0df;</string>
 <string name="wi-moon-wan-cres">&#xf0e0;</string>
 <string name="wi-moon-new">&#xf0e1;</string>
-
+<string name="wi-arrow">&#xf0d2;</string>
+<string name="wi-direction">&#xf0d1;</string>  
 </resources>