Skip to content

Commit 0c1ff7e

Browse files
danilobjrdanilobjr
committed
installing and configuring font-awesome sass
1 parent 3df7cfc commit 0c1ff7e

23 files changed

+2394
-1
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"bourbon": "^4.2.6",
2424
"css-loader": "^0.23.1",
2525
"file-loader": "^0.8.5",
26+
"font-awesome": "^4.6.1",
2627
"node-sass": "^3.4.2",
2728
"sass-loader": "^3.2.0",
2829
"style-loader": "^0.13.1",

‎src/styles/1-tools/__imports.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
@import 'bootstrap/stylesheets/bootstrap';
2+
@import 'font-awesome/scss/_font-awesome';
23
@import 'bourbon/bourbon';

‎src/styles/1-tools/font-awesome/fonts/FontAwesome.otf

120 KB
Binary file not shown.

‎src/styles/1-tools/font-awesome/fonts/fontawesome-webfont.eot

73.5 KB
Binary file not shown.

‎src/styles/1-tools/font-awesome/fonts/fontawesome-webfont.svg

+685
Loading

‎src/styles/1-tools/font-awesome/fonts/fontawesome-webfont.ttf

147 KB
Binary file not shown.

‎src/styles/1-tools/font-awesome/fonts/fontawesome-webfont.woff

87 KB
Binary file not shown.

‎src/styles/1-tools/font-awesome/fonts/fontawesome-webfont.woff2

69.1 KB
Binary file not shown.

‎src/styles/1-tools/font-awesome/scss/__font-awesome.scss

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/*!
2+
* Font Awesome 4.6.1 by @davegandy - http://fontawesome.io - @fontawesome
3+
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
4+
*/
5+
6+
@import "variables";
7+
@import "mixins";
8+
@import "path";
9+
@import "core";
10+
@import "larger";
11+
@import "fixed-width";
12+
@import "list";
13+
@import "bordered-pulled";
14+
@import "animated";
15+
@import "rotated-flipped";
16+
@import "stacked";
17+
@import "icons";
18+
@import "screen-reader";

‎src/styles/1-tools/font-awesome/scss/_animated.scss

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// Spinning Icons
2+
// --------------------------
3+
4+
.#{$fa-css-prefix}-spin {
5+
-webkit-animation: fa-spin 2s infinite linear;
6+
animation: fa-spin 2s infinite linear;
7+
}
8+
9+
.#{$fa-css-prefix}-pulse {
10+
-webkit-animation: fa-spin 1s infinite steps(8);
11+
animation: fa-spin 1s infinite steps(8);
12+
}
13+
14+
@-webkit-keyframes fa-spin {
15+
0% {
16+
-webkit-transform: rotate(0deg);
17+
transform: rotate(0deg);
18+
}
19+
100% {
20+
-webkit-transform: rotate(359deg);
21+
transform: rotate(359deg);
22+
}
23+
}
24+
25+
@keyframes fa-spin {
26+
0% {
27+
-webkit-transform: rotate(0deg);
28+
transform: rotate(0deg);
29+
}
30+
100% {
31+
-webkit-transform: rotate(359deg);
32+
transform: rotate(359deg);
33+
}
34+
}

‎src/styles/1-tools/font-awesome/scss/_bordered-pulled.scss

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Bordered & Pulled
2+
// -------------------------
3+
4+
.#{$fa-css-prefix}-border {
5+
padding: .2em .25em .15em;
6+
border: solid .08em $fa-border-color;
7+
border-radius: .1em;
8+
}
9+
10+
.#{$fa-css-prefix}-pull-left { float: left; }
11+
.#{$fa-css-prefix}-pull-right { float: right; }
12+
13+
.#{$fa-css-prefix} {
14+
&.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
15+
&.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
16+
}
17+
18+
/* Deprecated as of 4.4.0 */
19+
.pull-right { float: right; }
20+
.pull-left { float: left; }
21+
22+
.#{$fa-css-prefix} {
23+
&.pull-left { margin-right: .3em; }
24+
&.pull-right { margin-left: .3em; }
25+
}

‎src/styles/1-tools/font-awesome/scss/_core.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Base Class Definition
2+
// -------------------------
3+
4+
.#{$fa-css-prefix} {
5+
display: inline-block;
6+
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
7+
font-size: inherit; // can't have font-size inherit on line above, so need to override
8+
text-rendering: auto; // optimizelegibility throws things off #1094
9+
-webkit-font-smoothing: antialiased;
10+
-moz-osx-font-smoothing: grayscale;
11+
12+
}

‎src/styles/1-tools/font-awesome/scss/_fixed-width.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// Fixed Width Icons
2+
// -------------------------
3+
.#{$fa-css-prefix}-fw {
4+
width: (18em / 14);
5+
text-align: center;
6+
}

‎src/styles/1-tools/font-awesome/scss/_icons.scss

+724
Large diffs are not rendered by default.

‎src/styles/1-tools/font-awesome/scss/_larger.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Icon Sizes
2+
// -------------------------
3+
4+
/* makes the font 33% larger relative to the icon container */
5+
.#{$fa-css-prefix}-lg {
6+
font-size: (4em / 3);
7+
line-height: (3em / 4);
8+
vertical-align: -15%;
9+
}
10+
.#{$fa-css-prefix}-2x { font-size: 2em; }
11+
.#{$fa-css-prefix}-3x { font-size: 3em; }
12+
.#{$fa-css-prefix}-4x { font-size: 4em; }
13+
.#{$fa-css-prefix}-5x { font-size: 5em; }

‎src/styles/1-tools/font-awesome/scss/_list.scss

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// List Icons
2+
// -------------------------
3+
4+
.#{$fa-css-prefix}-ul {
5+
padding-left: 0;
6+
margin-left: $fa-li-width;
7+
list-style-type: none;
8+
> li { position: relative; }
9+
}
10+
.#{$fa-css-prefix}-li {
11+
position: absolute;
12+
left: -$fa-li-width;
13+
width: $fa-li-width;
14+
top: (2em / 14);
15+
text-align: center;
16+
&.#{$fa-css-prefix}-lg {
17+
left: -$fa-li-width + (4em / 14);
18+
}
19+
}

‎src/styles/1-tools/font-awesome/scss/_mixins.scss

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// Mixins
2+
// --------------------------
3+
4+
@mixin fa-icon() {
5+
display: inline-block;
6+
font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
7+
font-size: inherit; // can't have font-size inherit on line above, so need to override
8+
text-rendering: auto; // optimizelegibility throws things off #1094
9+
-webkit-font-smoothing: antialiased;
10+
-moz-osx-font-smoothing: grayscale;
11+
12+
}
13+
14+
@mixin fa-icon-rotate($degrees, $rotation) {
15+
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
16+
-webkit-transform: rotate($degrees);
17+
-ms-transform: rotate($degrees);
18+
transform: rotate($degrees);
19+
}
20+
21+
@mixin fa-icon-flip($horiz, $vert, $rotation) {
22+
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
23+
-webkit-transform: scale($horiz, $vert);
24+
-ms-transform: scale($horiz, $vert);
25+
transform: scale($horiz, $vert);
26+
}
27+
28+
29+
// Only display content to screen readers. A la Bootstrap 4.
30+
//
31+
// See: http://a11yproject.com/posts/how-to-hide-content/
32+
33+
@mixin sr-only {
34+
position: absolute;
35+
width: 1px;
36+
height: 1px;
37+
padding: 0;
38+
margin: -1px;
39+
overflow: hidden;
40+
clip: rect(0,0,0,0);
41+
border: 0;
42+
}
43+
44+
// Use in conjunction with .sr-only to only display content when it's focused.
45+
//
46+
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
47+
//
48+
// Credit: HTML5 Boilerplate
49+
50+
@mixin sr-only-focusable {
51+
&:active,
52+
&:focus {
53+
position: static;
54+
width: auto;
55+
height: auto;
56+
margin: 0;
57+
overflow: visible;
58+
clip: auto;
59+
}
60+
}

‎src/styles/1-tools/font-awesome/scss/_path.scss

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* FONT PATH
2+
* -------------------------- */
3+
4+
@font-face {
5+
font-family: 'FontAwesome';
6+
src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
7+
src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
8+
url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
9+
url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
10+
url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
11+
url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
12+
// src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
13+
font-weight: normal;
14+
font-style: normal;
15+
}

‎src/styles/1-tools/font-awesome/scss/_rotated-flipped.scss

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Rotated & Flipped Icons
2+
// -------------------------
3+
4+
.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); }
5+
.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
6+
.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
7+
8+
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
9+
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); }
10+
11+
// Hook for IE8-9
12+
// -------------------------
13+
14+
:root .#{$fa-css-prefix}-rotate-90,
15+
:root .#{$fa-css-prefix}-rotate-180,
16+
:root .#{$fa-css-prefix}-rotate-270,
17+
:root .#{$fa-css-prefix}-flip-horizontal,
18+
:root .#{$fa-css-prefix}-flip-vertical {
19+
filter: none;
20+
}

‎src/styles/1-tools/font-awesome/scss/_screen-reader.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Screen Readers
2+
// -------------------------
3+
4+
.sr-only { @include sr-only(); }
5+
.sr-only-focusable { @include sr-only-focusable(); }

‎src/styles/1-tools/font-awesome/scss/_stacked.scss

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Stacked Icons
2+
// -------------------------
3+
4+
.#{$fa-css-prefix}-stack {
5+
position: relative;
6+
display: inline-block;
7+
width: 2em;
8+
height: 2em;
9+
line-height: 2em;
10+
vertical-align: middle;
11+
}
12+
.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
13+
position: absolute;
14+
left: 0;
15+
width: 100%;
16+
text-align: center;
17+
}
18+
.#{$fa-css-prefix}-stack-1x { line-height: inherit; }
19+
.#{$fa-css-prefix}-stack-2x { font-size: 2em; }
20+
.#{$fa-css-prefix}-inverse { color: $fa-inverse; }

0 commit comments

Comments
 (0)