12345678910111213141516171819202122232425262728 |
- // mixins
- // --------------------------
- @use 'variables' as v;
- // base rendering for an icon
- @mixin fa-icon($family: v.$family) {
- --_#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family, var(--#{v.$css-prefix}-style-family, '#{$family}'));
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- display: var(--#{v.$css-prefix}-display, #{v.$display});
- font-family: var(--_#{v.$css-prefix}-family);
- font-feature-settings: normal;
- font-style: normal;
- font-synthesis: none;
- font-variant: normal;
- font-weight: var(--#{v.$css-prefix}-style, #{v.$style});
- line-height: 1;
- text-align: center;
- text-rendering: auto;
- width: var(--#{v.$css-prefix}-width, #{v.$fw-width});
- }
- // sets relative font-sizing and alignment (in _sizing)
- @mixin fa-size ($font-size) {
- font-size: calc(#{$font-size} / #{v.$size-scale-base} * 1em); /* converts a #{$font-size}px size into an em-based value that's relative to the scale's #{v.$size-scale-base}px base */
- line-height: calc(1 / #{$font-size} * 1em); /* sets the line-height of the icon back to that of it's parent */
- vertical-align: calc(((6 / #{$font-size}) - (3 / 8)) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
- }
|