font-awesome-sass 5.15.1 → 6.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +22 -66
  3. data/assets/fonts/font-awesome/fa-brands-400.ttf +0 -0
  4. data/assets/fonts/font-awesome/fa-brands-400.woff2 +0 -0
  5. data/assets/fonts/font-awesome/fa-regular-400.ttf +0 -0
  6. data/assets/fonts/font-awesome/fa-regular-400.woff2 +0 -0
  7. data/assets/fonts/font-awesome/fa-solid-900.ttf +0 -0
  8. data/assets/fonts/font-awesome/fa-solid-900.woff2 +0 -0
  9. data/assets/stylesheets/_font-awesome.scss +11 -4
  10. data/assets/stylesheets/font-awesome/_animated.scss +201 -5
  11. data/assets/stylesheets/font-awesome/_bordered-pulled.scss +13 -13
  12. data/assets/stylesheets/font-awesome/_brands.scss +33 -0
  13. data/assets/stylesheets/font-awesome/_core.scss +16 -4
  14. data/assets/stylesheets/font-awesome/_fixed-width.scss +2 -1
  15. data/assets/stylesheets/font-awesome/_functions.scss +66 -0
  16. data/assets/stylesheets/font-awesome/_icons.scss +8 -1459
  17. data/assets/stylesheets/font-awesome/_list.scss +7 -5
  18. data/assets/stylesheets/font-awesome/_mixins.scss +50 -34
  19. data/assets/stylesheets/font-awesome/_regular.scss +27 -0
  20. data/assets/stylesheets/font-awesome/_rotated-flipped.scss +25 -18
  21. data/assets/stylesheets/font-awesome/_screen-reader.scss +12 -3
  22. data/assets/stylesheets/font-awesome/_shims.scss +1195 -652
  23. data/assets/stylesheets/font-awesome/_sizing.scss +16 -0
  24. data/assets/stylesheets/font-awesome/_solid.scss +26 -0
  25. data/assets/stylesheets/font-awesome/_stacked.scss +5 -4
  26. data/assets/stylesheets/font-awesome/_variables.scss +4183 -780
  27. data/font-awesome-sass.gemspec +1 -2
  28. data/lib/font-awesome-sass.rb +0 -18
  29. data/lib/font_awesome/sass/rails/engine.rb +1 -1
  30. data/lib/font_awesome/sass/rails/helpers.rb +1 -0
  31. data/lib/font_awesome/sass/version.rb +1 -1
  32. metadata +12 -35
  33. data/assets/fonts/font-awesome/fa-brands-400.eot +0 -0
  34. data/assets/fonts/font-awesome/fa-brands-400.svg +0 -3717
  35. data/assets/fonts/font-awesome/fa-brands-400.woff +0 -0
  36. data/assets/fonts/font-awesome/fa-regular-400.eot +0 -0
  37. data/assets/fonts/font-awesome/fa-regular-400.svg +0 -801
  38. data/assets/fonts/font-awesome/fa-regular-400.woff +0 -0
  39. data/assets/fonts/font-awesome/fa-solid-900.eot +0 -0
  40. data/assets/fonts/font-awesome/fa-solid-900.svg +0 -5028
  41. data/assets/fonts/font-awesome/fa-solid-900.woff +0 -0
  42. data/assets/stylesheets/_font-awesome-compass.scss +0 -5
  43. data/assets/stylesheets/_font-awesome-sprockets.scss +0 -5
  44. data/assets/stylesheets/_v4-shims.scss +0 -6
  45. data/assets/stylesheets/font-awesome/_larger.scss +0 -23
  46. data/assets/stylesheets/font-awesome/_path.scss +0 -56
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: cacaa1219aaab42112307e8a47641b7ebba8861d1c2ac00e93beefccd15a3b94
4
- data.tar.gz: 3d848d1e5e78ea46eed168865cd82af8db729dce652dc178a7de75da444e4a38
3
+ metadata.gz: f5c06c2353401e01eb903d7796532fe4764c8803983f14bcb5227fdb033e4cb4
4
+ data.tar.gz: 90e10d9d0269b444d3e04d62e52c824a6def57a4036c43c79c3718e5ea2bc691
5
5
  SHA512:
6
- metadata.gz: 803c5abda6e911d06888a1d1271ab47b07264d26fd74cbe87a474810db83d9365eaf65bca34dedae86df3e2c8711843b6b90cd1f98586399d01c3e4f4f18f68a
7
- data.tar.gz: 15ce0e427b37547a0b1a3a50bdf0c23c43de4b2ea3bd10a9f5d28ba4a8335f02e46b437f57a4e1c4b3f3885647ee48b9ea78f5c14e0dadd2445c209777967a5c
6
+ metadata.gz: 52a9c0174c393113176678234787a18b298b9ee6f73a52569281120a23503986dd80f36b45ff40a646e64b63a5e8205c8e77683a9fe0837269b8c782bc47f260
7
+ data.tar.gz: a36c3de2a98628d55f9db9dc73c4a1291b011e3e617a66aca6a272de22ffa023e9b21f3bca66aa0698cb437baaebca851aa03deec3b70c1837fdd90d831049d8
data/README.md CHANGED
@@ -2,35 +2,20 @@
2
2
 
3
3
  [![Gem Version](https://badge.fury.io/rb/font-awesome-sass.svg)](https://badge.fury.io/rb/font-awesome-sass)
4
4
 
5
- 'font-awesome-sass' is a Sass-powered version of [FontAwesome](http://fortawesome.github.io/Font-Awesome/) for your Ruby projects and plays nicely with
6
- Ruby on Rails, Compass, Sprockets, etc.
5
+ 'font-awesome-sass' is a Sass-powered version of [Font Awesome](http://fontawesome.com/) for your Ruby projects with specific support for Ruby on Rails and Sprockets.
7
6
 
8
- Refactored to support more Ruby environments with code and documentation humbly used from the excellent
9
- [bootstrap-sass](https://github.com/twbs/bootstrap-sass) project by the Bootstrap team
7
+ Refactored to support more Ruby environments with code and documentation humbly used from the excellent [bootstrap-sass](https://github.com/twbs/bootstrap-sass) project by the Bootstrap team
10
8
 
11
- ## Breaking Changes
12
-
13
- With the update to Font Awesome 5.x there are some breaking changes that will effect your use of this gem. Some of the changes include:
14
-
15
- * Icon name changes
16
- * New icons
17
- * The use of an icon style (`solid`, `regular`, or `brands`)
18
-
19
- You can find more detailed information on these changes on our [Getting Started](https://fontawesome.com/get-started/web-fonts-with-css) guide, our [How to Use](https://fontawesome.com/how-to-use/web-fonts-with-css) guide, and our [Upgrading from Version 4](https://fontawesome.com/how-to-use/upgrading-from-4) guide.
9
+ You can find more detailed information on these changes on our [Getting Started](https://fontawesome.com/docs/web/setup/get-started) guide, our [How to Use](https://fontawesome.com/docs/web/) guide, and our [Upgrade](https://fontawesome.com/docs/web/setup/upgrade/) guide.
20
10
 
21
11
  ## Installation
22
12
 
23
- Please see the appropriate guide for your environment of choice:
24
-
25
- * [Ruby on Rails](#a-ruby-on-rails).
26
- * [Compass](#b-compass-without-rails) not on Rails.
27
-
28
- ### a. Ruby on Rails
13
+ ### Ruby on Rails
29
14
 
30
15
  In your Gemfile include:
31
16
 
32
17
  ```ruby
33
- gem 'font-awesome-sass', '~> 5.15.1'
18
+ gem 'font-awesome-sass', '~> 6.1.1'
34
19
  ```
35
20
 
36
21
  And then execute:
@@ -39,11 +24,9 @@ And then execute:
39
24
  bundle install
40
25
  ```
41
26
 
42
- Import the FontAwesome styles in your `app/assets/stylesheets/application.css.scss`. The `font-awesome-sprockets` file
43
- includes the sprockets assets helper Sass functions used for finding the proper path to the font file.
27
+ Import the FontAwesome styles in your `app/assets/stylesheets/application.css.scss`. The `font-awesome` file includes all the tools needed to get Font Awesome up and running for Rails.
44
28
 
45
29
  ```scss
46
- @import "font-awesome-sprockets";
47
30
  @import "font-awesome";
48
31
  ```
49
32
 
@@ -51,65 +34,38 @@ If `app/assets/stylesheets/application.css.scss` does not exist then rename `app
51
34
 
52
35
  #### Rails Helper usage
53
36
 
54
- With Font Awesome 5.x you now need to select what style of icon you want to use. Font Awesome 5.x has 3 styles:
37
+ With Font Awesome Free 6.x you now need to select what style of icon you want to use. Font Awesome Free 6.x has 3 styles:
55
38
 
56
- * solid (`fas`)
57
- * regular (`far`)
58
- * brands (`fab`)
39
+ * solid (`fa-solid` or `fas`)
40
+ * regular (`fa-regular` or `far`)
41
+ * brands (`fa-brands` or `fab`)
59
42
 
60
43
  In your view:
61
44
 
62
45
  ```ruby
46
+ icon('fa-solid', 'flag')
47
+ # => <i class="fa-solid fa-flag" aria-hidden="true"></i>
63
48
  icon('fas', 'flag')
64
- # => <i class="fas fa-flag"></i>
49
+ # => <i class="fas fa-flag" aria-hidden="true"></i>
50
+
65
51
  ```
66
52
 
67
53
  ```ruby
54
+ icon('fa-regular', 'address-book', class: 'strong')
55
+ # => <i class="fa-regular fa-address-book strong" aria-hidden="true"></i>
68
56
  icon('far', 'address-book', class: 'strong')
69
- # => <i class="far fa-address-book strong"></i>
57
+ # => <i class="far fa-address-book strong" aria-hidden="true"></i>
70
58
  ```
71
59
 
72
60
  ```ruby
61
+ icon('fa-brands', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'strong')
62
+ # => <i id="my-icon" class="fa-brands fa-font-awesome strong" aria-hidden="true"></i> Font Awesome
73
63
  icon('fab', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'strong')
74
- # => <i id="my-icon" class="fab fa-font-awesome strong"></i> Font Awesome
64
+ # => <i id="my-icon" class="fab fa-font-awesome strong" aria-hidden="true"></i> Font Awesome
75
65
  ```
76
66
 
77
67
  Note: the icon helper can take a hash of options that will be passed to the content_tag helper
78
68
 
79
- ### b. Compass without Rails
80
-
81
- Install the gem
82
-
83
- ```sh
84
- gem install font-awesome-sass
85
- ```
86
-
87
- If you have an existing Compass project:
88
-
89
- ```ruby
90
- # config.rb:
91
- require 'font-awesome-sass'
92
- ```
93
-
94
- Import the FontAwesome styles
95
-
96
- ```scss
97
- @import "font-awesome-compass";
98
- @import "font-awesome";
99
- ```
100
-
101
- ## Upgrading from FontAwesome::Sass 4.x
69
+ ### Other Ruby Projects
102
70
 
103
- Prepend the style of the icon you want to use (`fas`, `far`, `fab`) class to existing icons:
104
-
105
- 4.x Syntax
106
-
107
- ```html
108
- <i class="fa fa-github"></i>
109
- ```
110
-
111
- 5.x Syntax (GitHub icon exists in the Brands style)
112
-
113
- ```html
114
- <i class="fab fa-github"></i>
115
- ```
71
+ The `path.scss` file contains a function for using the `font-path` function if found. If the function is not found it will use the `$fa-font-path` variable for the path to the webfont files. You can override this variable to where your framework will store the webfonts files.
@@ -1,12 +1,16 @@
1
1
  /*!
2
- * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com
2
+ * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
3
3
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
+ * Copyright 2022 Fonticons, Inc.
4
5
  */
6
+ // Font Awesome core compile (Web Fonts-based)
7
+ // -------------------------
8
+
9
+ @import "font-awesome/functions";
5
10
  @import "font-awesome/variables";
6
11
  @import "font-awesome/mixins";
7
- @import "font-awesome/path";
8
12
  @import "font-awesome/core";
9
- @import "font-awesome/larger";
13
+ @import "font-awesome/sizing";
10
14
  @import "font-awesome/fixed-width";
11
15
  @import "font-awesome/list";
12
16
  @import "font-awesome/bordered-pulled";
@@ -14,4 +18,7 @@
14
18
  @import "font-awesome/rotated-flipped";
15
19
  @import "font-awesome/stacked";
16
20
  @import "font-awesome/icons";
17
- @import "font-awesome/screen-reader";
21
+ @import "font-awesome/screen-reader";
22
+ @import "font-awesome/solid";
23
+ @import "font-awesome/regular";
24
+ @import "font-awesome/brands";
@@ -1,19 +1,215 @@
1
- // Animated Icons
1
+ // animating icons
2
2
  // --------------------------
3
3
 
4
+ .#{$fa-css-prefix}-beat {
5
+ animation-name: #{$fa-css-prefix}-beat;
6
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
7
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
8
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
9
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
10
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
11
+ }
12
+
13
+ .#{$fa-css-prefix}-bounce {
14
+ animation-name: #{$fa-css-prefix}-bounce;
15
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
16
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
17
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
18
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
19
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
20
+ }
21
+
22
+ .#{$fa-css-prefix}-fade {
23
+ animation-name: #{$fa-css-prefix}-fade;
24
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
25
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
26
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
27
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
28
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
29
+ }
30
+
31
+ .#{$fa-css-prefix}-beat-fade {
32
+ animation-name: #{$fa-css-prefix}-beat-fade;
33
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
34
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
35
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
36
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
37
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
38
+ }
39
+
40
+ .#{$fa-css-prefix}-flip {
41
+ animation-name: #{$fa-css-prefix}-flip;
42
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
43
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
44
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
45
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
46
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
47
+ }
48
+
49
+ .#{$fa-css-prefix}-shake {
50
+ animation-name: #{$fa-css-prefix}-shake;
51
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
52
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
53
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
54
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
55
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
56
+ }
57
+
4
58
  .#{$fa-css-prefix}-spin {
5
- animation: fa-spin 2s infinite linear;
59
+ animation-name: #{$fa-css-prefix}-spin;
60
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
61
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
62
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
63
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
64
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
65
+ }
66
+
67
+ .#{$fa-css-prefix}-spin-reverse {
68
+ --#{$fa-css-prefix}-animation-direction: reverse;
69
+ }
70
+
71
+ .#{$fa-css-prefix}-pulse,
72
+ .#{$fa-css-prefix}-spin-pulse {
73
+ animation-name: #{$fa-css-prefix}-spin;
74
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
75
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
76
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
77
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8));
78
+ }
79
+
80
+ // if agent or operating system prefers reduced motion, disable animations
81
+ // see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
82
+ // see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
83
+ @media (prefers-reduced-motion: reduce) {
84
+ .#{$fa-css-prefix}-beat,
85
+ .#{$fa-css-prefix}-bounce,
86
+ .#{$fa-css-prefix}-fade,
87
+ .#{$fa-css-prefix}-beat-fade,
88
+ .#{$fa-css-prefix}-flip,
89
+ .#{$fa-css-prefix}-pulse,
90
+ .#{$fa-css-prefix}-shake,
91
+ .#{$fa-css-prefix}-spin,
92
+ .#{$fa-css-prefix}-spin-pulse {
93
+ animation-delay: -1ms;
94
+ animation-duration: 1ms;
95
+ animation-iteration-count: 1;
96
+ transition-delay: 0s;
97
+ transition-duration: 0s;
98
+ }
99
+ }
100
+
101
+ @keyframes #{$fa-css-prefix}-beat {
102
+ 0%,
103
+ 90% {
104
+ transform: scale(1);
105
+ }
106
+ 45% {
107
+ transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25));
108
+ }
109
+ }
110
+
111
+ @keyframes #{$fa-css-prefix}-bounce {
112
+ 0% {
113
+ transform: scale(1, 1) translateY(0);
114
+ }
115
+ 10% {
116
+ transform: scale(
117
+ var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),
118
+ var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)
119
+ )
120
+ translateY(0);
121
+ }
122
+ 30% {
123
+ transform: scale(
124
+ var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),
125
+ var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)
126
+ )
127
+ translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em));
128
+ }
129
+ 50% {
130
+ transform: scale(
131
+ var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),
132
+ var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)
133
+ )
134
+ translateY(0);
135
+ }
136
+ 57% {
137
+ transform: scale(1, 1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em));
138
+ }
139
+ 64% {
140
+ transform: scale(1, 1) translateY(0);
141
+ }
142
+ 100% {
143
+ transform: scale(1, 1) translateY(0);
144
+ }
145
+ }
146
+
147
+ @keyframes #{$fa-css-prefix}-fade {
148
+ 50% {
149
+ opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4);
150
+ }
151
+ }
152
+
153
+ @keyframes #{$fa-css-prefix}-beat-fade {
154
+ 0%,
155
+ 100% {
156
+ opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
157
+ transform: scale(1);
158
+ }
159
+ 50% {
160
+ opacity: 1;
161
+ transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
162
+ }
6
163
  }
7
164
 
8
- .#{$fa-css-prefix}-pulse {
9
- animation: fa-spin 1s infinite steps(8);
165
+ @keyframes #{$fa-css-prefix}-flip {
166
+ 50% {
167
+ transform: rotate3d(
168
+ var(--#{$fa-css-prefix}-flip-x, 0),
169
+ var(--#{$fa-css-prefix}-flip-y, 1),
170
+ var(--#{$fa-css-prefix}-flip-z, 0),
171
+ var(--#{$fa-css-prefix}-flip-angle, -180deg)
172
+ );
173
+ }
10
174
  }
11
175
 
12
- @keyframes fa-spin {
176
+ @keyframes #{$fa-css-prefix}-shake {
13
177
  0% {
178
+ transform: rotate(-15deg);
179
+ }
180
+ 4% {
181
+ transform: rotate(15deg);
182
+ }
183
+ 8%,
184
+ 24% {
185
+ transform: rotate(-18deg);
186
+ }
187
+ 12%,
188
+ 28% {
189
+ transform: rotate(18deg);
190
+ }
191
+ 16% {
192
+ transform: rotate(-22deg);
193
+ }
194
+ 20% {
195
+ transform: rotate(22deg);
196
+ }
197
+ 32% {
198
+ transform: rotate(-12deg);
199
+ }
200
+ 36% {
201
+ transform: rotate(12deg);
202
+ }
203
+ 40%,
204
+ 100% {
14
205
  transform: rotate(0deg);
15
206
  }
207
+ }
16
208
 
209
+ @keyframes #{$fa-css-prefix}-spin {
210
+ 0% {
211
+ transform: rotate(0deg);
212
+ }
17
213
  100% {
18
214
  transform: rotate(360deg);
19
215
  }
@@ -1,20 +1,20 @@
1
- // Bordered & Pulled
1
+ // bordered + pulled icons
2
2
  // -------------------------
3
3
 
4
4
  .#{$fa-css-prefix}-border {
5
- border: solid .08em $fa-border-color;
6
- border-radius: .1em;
7
- padding: .2em .25em .15em;
5
+ border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
6
+ border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
7
+ border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
8
+ border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
9
+ padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
8
10
  }
9
11
 
10
- .#{$fa-css-prefix}-pull-left { float: left; }
11
- .#{$fa-css-prefix}-pull-right { float: right; }
12
+ .#{$fa-css-prefix}-pull-left {
13
+ float: left;
14
+ margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
15
+ }
12
16
 
13
- .#{$fa-css-prefix},
14
- .fas,
15
- .far,
16
- .fal,
17
- .fab {
18
- &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
19
- &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
17
+ .#{$fa-css-prefix}-pull-right {
18
+ float: right;
19
+ margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
20
20
  }
@@ -0,0 +1,33 @@
1
+ /*!
2
+ * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
3
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
+ * Copyright 2022 Fonticons, Inc.
5
+ */
6
+ @import "functions";
7
+ @import "variables";
8
+
9
+ :root,
10
+ :host {
11
+ --#{$fa-css-prefix}-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
12
+ }
13
+
14
+ @font-face {
15
+ font-family: "Font Awesome 6 Brands";
16
+ font-style: normal;
17
+ font-weight: 400;
18
+ font-display: $fa-font-display;
19
+ src: url(fa-font-path("fa-brands-400.woff2")) format("woff2"),
20
+ url(fa-font-path("fa-brands-400.ttf")) format("truetype");
21
+ }
22
+
23
+ .fab,
24
+ .#{$fa-css-prefix}-brands {
25
+ font-family: "Font Awesome 6 Brands";
26
+ font-weight: 400;
27
+ }
28
+
29
+ @each $name, $icon in $fa-brand-icons {
30
+ .#{$fa-css-prefix}-#{$name}:before {
31
+ content: unquote('"#{ $icon }"');
32
+ }
33
+ }
@@ -1,19 +1,31 @@
1
- // Base Class Definition
1
+ // base icon class definition
2
2
  // -------------------------
3
3
 
4
+ .#{$fa-css-prefix} {
5
+ font-family: var(--#{$fa-css-prefix}-style-family, "#{$fa-style-family}");
6
+ font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
7
+ }
8
+
4
9
  .#{$fa-css-prefix},
5
10
  .fas,
11
+ .#{$fa-css-prefix}-solid,
6
12
  .far,
13
+ .#{$fa-css-prefix}-regular,
7
14
  .fal,
15
+ .#{$fa-css-prefix}-light,
16
+ .fat,
17
+ .#{$fa-css-prefix}-thin,
8
18
  .fad,
9
- .fab {
19
+ .#{$fa-css-prefix}-duotone,
20
+ .fab,
21
+ .#{$fa-css-prefix}-brands {
10
22
  -moz-osx-font-smoothing: grayscale;
11
23
  -webkit-font-smoothing: antialiased;
12
- display: inline-block;
24
+ display: var(--#{$fa-css-prefix}-display, #{$fa-display});
13
25
  font-style: normal;
14
26
  font-variant: normal;
15
- text-rendering: auto;
16
27
  line-height: 1;
28
+ text-rendering: auto;
17
29
  }
18
30
 
19
31
  %fa-icon {
@@ -1,5 +1,6 @@
1
- // Fixed Width Icons
1
+ // fixed-width icons
2
2
  // -------------------------
3
+
3
4
  .#{$fa-css-prefix}-fw {
4
5
  text-align: center;
5
6
  width: $fa-fw-width;
@@ -0,0 +1,66 @@
1
+ // functions
2
+ // --------------------------
3
+
4
+ // fa-content: convenience function used to set content property
5
+ @function fa-content($fa-var) {
6
+ @return unquote('"#{ $fa-var }"');
7
+ }
8
+
9
+ // fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
10
+ //
11
+ // Licensed under: The MIT License (MIT)
12
+ //
13
+ // Copyright (c) 2011-2021 Twitter, Inc.
14
+ // Copyright (c) 2011-2021 The Bootstrap Authors
15
+ //
16
+ // Permission is hereby granted, free of charge, to any person obtaining a copy
17
+ // of this software and associated documentation files (the "Software"), to deal
18
+ // in the Software without restriction, including without limitation the rights
19
+ // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
20
+ // copies of the Software, and to permit persons to whom the Software is
21
+ // furnished to do so, subject to the following conditions:
22
+ //
23
+ // The above copyright notice and this permission notice shall be included in
24
+ // all copies or substantial portions of the Software.
25
+ //
26
+ // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
27
+ // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
28
+ // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
29
+ // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
30
+ // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
31
+ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
32
+ // THE SOFTWARE.
33
+
34
+ @function fa-divide($dividend, $divisor, $precision: 10) {
35
+ $sign: if($dividend > 0 and $divisor > 0, 1, -1);
36
+ $dividend: abs($dividend);
37
+ $divisor: abs($divisor);
38
+ $quotient: 0;
39
+ $remainder: $dividend;
40
+ @if $dividend == 0 {
41
+ @return 0;
42
+ }
43
+ @if $divisor == 0 {
44
+ @error "Cannot divide by 0";
45
+ }
46
+ @if $divisor == 1 {
47
+ @return $dividend;
48
+ }
49
+ @while $remainder >= $divisor {
50
+ $quotient: $quotient + 1;
51
+ $remainder: $remainder - $divisor;
52
+ }
53
+ @if $remainder > 0 and $precision > 0 {
54
+ $remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * 0.1;
55
+ }
56
+ @return ($quotient + $remainder) * $sign;
57
+ }
58
+
59
+ // fa-font-path: function used to set font path to webfont files
60
+ @function fa-font-path($file) {
61
+ @if function-exists("font-path") {
62
+ @return font-path("font-awesome/#{$file}");
63
+ } @else {
64
+ @return "#{$fa-font-path}/#{$file}";
65
+ }
66
+ }