add self-hosted font

2017-08-31 15:02:50 +01:00
parent c0fe44e453
commit e071052d57
12 changed files with 12 additions and 17 deletions
@@ -0,0 +1,104 @@
+$icons: (
+	flickr: "\eaa3",
+	flickr2: "\eaa4",
+	github: "\eab0",
+	lastfm: "\eacb",
+	envelope-o: "\f003",
+	twitter: "\f099",
+	facebook: "\f09a",
+	facebook-f: "\f09a",
+	pinterest: "\f0d2",
+	google-plus: "\f0d5",
+	envelope: "\f0e0",
+	linkedin: "\f0e1",
+	rss-square: "\f143",
+	youtube: "\f167",
+	xing: "\f168",
+	youtube-play: "\f16a",
+	dropbox: "\f16b",
+	instagram: "\f16d",
+	tumblr: "\f173",
+	foursquare: "\f180",
+	vk: "\f189",
+	weibo: "\f18a",
+	renren: "\f18b",
+	google: "\f1a0",
+	stumbleupon: "\f1a4",
+	delicious: "\f1a5",
+	digg: "\f1a6",
+	file-pdf-o: "\f1c1",
+	file-word-o: "\f1c2",
+	file-excel-o: "\f1c3",
+	file-powerpoint-o: "\f1c4",
+	vine: "\f1ca",
+	tencent-weibo: "\f1d5",
+	qq: "\f1d6",
+	wechat: "\f1d7",
+	weixin: "\f1d7",
+	paper-plane: "\f1d8",
+	send: "\f1d8",
+	paper-plane-o: "\f1d9",
+	send-o: "\f1d9",
+	pinterest-p: "\f231",
+	medium: "\f23a",
+	tripadvisor: "\f262",
+	vimeo: "\f27d",
+	snapchat-ghost: "\f2ac",
+	meetup: "\f2e0"
+);
+
+// For adding font icons to elements using CSS pseudo-elements
+// http://jaydenseric.com/blog/fun-with-sass-and-font-icons
+@mixin icon($position: before, $icon: false, $styles: true) {
+	
+    @if $position == both {
+        $position: 'before, &:after';
+    }
+    // Either a :before or :after pseudo-element, or both, defaulting to :before
+    &:#{$position} {
+        @if $icon {
+            // A particular icon has been specified
+            content: "#{map-get($icons, $icon)}";
+        }
+        @if $styles {
+            // Supportive icon styles required
+            vertical-align: middle;
+			text-transform: none;
+			font-weight: normal;
+			font-style: normal;
+			font-variant: normal;
+			font-family: '#{$icon-font}';
+			line-height: 1;
+
+			speak: none;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+        }
+        // Include any extra rules supplied for the pseudo-element
+        @content;
+    }
+}
+
+@font-face {
+	font-weight: normal;
+	font-style: normal;
+	font-family: '#{$icon-font}';
+	src:url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.eot?-gfwsty');
+	src:url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.eot?#iefix-gfwsty') format('embedded-opentype'),
+	url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.ttf?-gfwsty') format('truetype'),
+	url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.woff?-gfwsty') format('woff'),
+	url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.svg?-gfwsty##{$icon-font}') format('svg');
+}
+
+// Set the required styles on all icons
+[class^="icon--"],
+[class*=" icon--"] {
+    @include icon;
+}
+
+// Setup a class name for each icon
+@each $name, $char in $icons {
+    .icon--#{$name} {
+		@include icon(before, $name, false);
+    }
+}