Merge pull request #5 from mollyfish/icons

Icons
mollyfish · Oct 6, 2015 · 87345e1 · 87345e1
2 parents 84bb4f7 + 467fb5a
commit 87345e1
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 3 deletions.
diff --git a/public/icons.html b/public/icons.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>Icon Components</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="apple-touch-icon" href="apple-touch-icon.png">
+        <link rel="stylesheet" href="css/main.css">
+    </head>
+    <body>
+        <a href="#" class="icon-menu"></a>
+        <a href="https://plus.google.com/" class=" icon-style icon-google-plus"></a>
+        <a href="http://www.facebook.com" class="icon-style icon-facebook"></a>
+        <a href="http://www.twitter.com" class="icon-style icon-twitter"></a>
+        <a href="http://www.linkedin.com" class=" icon-style icon-linkedin"></a>
+        <a href="http://www.pinterest.com" class="icon-pinterest"></a>
+        <script src="js/index.js"></script>
+    </body>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -12,4 +12,5 @@
     <p>Hello world! This is HTML5 Boilerplate.</p>
     <script src="js/index.js"></script>
   </body>
-</html>
+</html>
+
diff --git a/public/sass/main.scss b/public/sass/main.scss
@@ -1,7 +1,8 @@
 @import "modules/reset.scss";
 @import "modules/colors.scss";
 @import "modules/typography.scss";
+@import "modules/icon-fonts";
 
+@import "partials/icons.scss";
+@import "partials/buttons.scss";
 
-
-@import "partials/buttons.scss";
diff --git a/public/sass/modules/_icon-fonts.scss b/public/sass/modules/_icon-fonts.scss
@@ -0,0 +1,40 @@
+@font-face {
+  font-family: 'icomoon';
+  src:url('fonts/icomoon.eot?j42c1j');
+  src:url('fonts/icomoon.eot?j42c1j#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?j42c1j') format('truetype'),
+    url('fonts/icomoon.woff?j42c1j') format('woff'),
+    url('fonts/icomoon.svg?j42c1j#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  font-family: 'icomoon';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 2;
+  color: $text-color-light;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+$icons:
+(menu '\20')
+(google-plus '\e800')
+(facebook '\e801')
+(twitter '\e802')
+(linkedin '\e803')
+(pinterest '\e804')
+;
+
+@each $icon in $icons {
+  .icon-#{nth($icon, 1)}:before {
+    content:nth($icon, 2);
+  }
+}
+
+
diff --git a/public/sass/partials/_icons.scss b/public/sass/partials/_icons.scss
@@ -0,0 +1,14 @@
+.icon-style {
+  font-size: 100%;
+  border-radius: 50%;
+  padding: .3em;
+  background-color: $background-color-dark;
+}
+.icon-pinterest:before {
+  font-size: 150%;
+  color: $text-color-dark;
+}
+.icon-menu:before {
+  font-size: 150%;
+  color: $text-color-dark;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,4 +12,5 @@ @@
         <p>Hello world! This is HTML5 Boilerplate.</p>
         <script src="js/index.js"></script>
       </body>
-    </html>
+    </html>