feat: 完整显示图标

This commit is contained in:
h_mo 2022-09-28 20:45:26 +08:00
parent 1a1c142080
commit b60f7fa728
11 changed files with 46 additions and 35 deletions

26
pnpm-lock.yaml generated
View File

@ -19,7 +19,6 @@ specifiers:
'@dcloudio/uni-quickapp-webview': ^3.0.0-alpha-3060420220922004 '@dcloudio/uni-quickapp-webview': ^3.0.0-alpha-3060420220922004
'@dcloudio/vite-plugin-uni': ^3.0.0-alpha-3060420220922004 '@dcloudio/vite-plugin-uni': ^3.0.0-alpha-3060420220922004
'@fortawesome/fontawesome-free': ^6.2.0 '@fortawesome/fontawesome-free': ^6.2.0
'@fortawesome/vue-fontawesome': ^2.0.8
'@types/crypto-js': ^4.1.1 '@types/crypto-js': ^4.1.1
'@types/lodash-es': ^4.17.6 '@types/lodash-es': ^4.17.6
'@types/node': ^17.0.45 '@types/node': ^17.0.45
@ -66,7 +65,6 @@ dependencies:
'@dcloudio/uni-mp-weixin': 3.0.0-alpha-3060420220922004_postcss@8.4.16+vue@3.2.39 '@dcloudio/uni-mp-weixin': 3.0.0-alpha-3060420220922004_postcss@8.4.16+vue@3.2.39
'@dcloudio/uni-quickapp-webview': 3.0.0-alpha-3060420220922004_postcss@8.4.16+vue@3.2.39 '@dcloudio/uni-quickapp-webview': 3.0.0-alpha-3060420220922004_postcss@8.4.16+vue@3.2.39
'@fortawesome/fontawesome-free': 6.2.0 '@fortawesome/fontawesome-free': 6.2.0
'@fortawesome/vue-fontawesome': 2.0.8_4h6vf4pkzarhnju6fzmo7mfhke
crypto-js: 4.1.1 crypto-js: 4.1.1
echarts: 5.4.0 echarts: 5.4.0
lodash-es: 4.17.21 lodash-es: 4.17.21
@ -953,36 +951,12 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@fortawesome/fontawesome-common-types/6.2.0:
resolution: {integrity: sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==}
engines: {node: '>=6'}
requiresBuild: true
dev: false
/@fortawesome/fontawesome-free/6.2.0: /@fortawesome/fontawesome-free/6.2.0:
resolution: {integrity: sha512-CNR7qRIfCwWHNN7FnKUniva94edPdyQzil/zCwk3v6k4R6rR2Fr8i4s3PM7n/lyfPA6Zfko9z5WDzFxG9SW1uQ==} resolution: {integrity: sha512-CNR7qRIfCwWHNN7FnKUniva94edPdyQzil/zCwk3v6k4R6rR2Fr8i4s3PM7n/lyfPA6Zfko9z5WDzFxG9SW1uQ==}
engines: {node: '>=6'} engines: {node: '>=6'}
requiresBuild: true requiresBuild: true
dev: false dev: false
/@fortawesome/fontawesome-svg-core/6.2.0:
resolution: {integrity: sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==}
engines: {node: '>=6'}
requiresBuild: true
dependencies:
'@fortawesome/fontawesome-common-types': 6.2.0
dev: false
/@fortawesome/vue-fontawesome/2.0.8_4h6vf4pkzarhnju6fzmo7mfhke:
resolution: {integrity: sha512-SRmP0q9Ox4zq8ydDR/hrH+23TVU1bdwYVnugLVaAIwklOHbf56gx6JUGlwES7zjuNYqzKgl8e39iYf6ph8qSQw==}
peerDependencies:
'@fortawesome/fontawesome-svg-core': ~1 || ~6
vue: ~2
dependencies:
'@fortawesome/fontawesome-svg-core': 6.2.0
vue: 3.2.39
dev: false
/@humanwhocodes/config-array/0.10.5: /@humanwhocodes/config-array/0.10.5:
resolution: {integrity: sha512-XVVDtp+dVvRxMoxSiSfasYaG02VEe1qH5cKgMQJWhol6HwzbcqoCMJi8dAGoYAO57jhUyhI6cWuRiTcRaDaYug==} resolution: {integrity: sha512-XVVDtp+dVvRxMoxSiSfasYaG02VEe1qH5cKgMQJWhol6HwzbcqoCMJi8dAGoYAO57jhUyhI6cWuRiTcRaDaYug==}
engines: {node: '>=10.10.0'} engines: {node: '>=10.10.0'}

View File

@ -16,8 +16,11 @@
<view> <view class="fa-regular fa-house" />regular</view> <view> <view class="fa-regular fa-house" />regular</view>
<view> <view class="fa-light fa-house" />light</view> <view> <view class="fa-light fa-house" />light</view>
<view> <view class="fa-thin fa-house" />thin</view> <view> <view class="fa-thin fa-house" />thin</view>
<view> <view class="fa-duotone fa-house" />duotone</view> <view>
<view class="fa-duotone fa-house" /> <i class="fa-duotone fa-magnifying-glass"></i>duotone</view
>
<view> <view class="fa-brands fa-bilibili" />brands </view> <view> <view class="fa-brands fa-bilibili" />brands </view>
<view> <view class="fass fa-user" />sharp </view>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.font-awesome-icon { .font-awesome-icon {

View File

@ -20,7 +20,10 @@
.fat, .fat,
.#{$fa-css-prefix}-thin, .#{$fa-css-prefix}-thin,
.fad, .fad,
.#{$fa-css-prefix}-duotone .#{$fa-css-prefix}-duotone,
.fass,
.#{$fa-css-prefix}-sharp,
.#{$fa-css-prefix}-sharp-solid
{ {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -43,7 +46,7 @@
.fat, .fat,
.#{$fa-css-prefix}-thin .#{$fa-css-prefix}-thin
{ {
font-family: 'Font Awesome 6 Free'; font-family: 'Font Awesome 6';
} }
.fab, .fab,
@ -56,6 +59,11 @@
font-family: 'Font Awesome 6 Duotone'; font-family: 'Font Awesome 6 Duotone';
} }
.fass,
.#{$fa-css-prefix}-harp-solid.#{$fa-css-prefix}-solid {
font-family: 'Font Awesome 6 Sharp';
}
%fa-icon { %fa-icon {
@include fa-icon; @include fa-icon;

View File

@ -7,3 +7,9 @@ readers do not read off random characters that represent icons */
@each $name, $icon in $fa-icons { @each $name, $icon in $fa-icons {
.#{$fa-css-prefix}-#{$name}::before { content: unquote("\"#{ $icon }\""); } .#{$fa-css-prefix}-#{$name}::before { content: unquote("\"#{ $icon }\""); }
} }
@each $name, $icon in $fa-icons {
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-#{$name}::after { content: unquote("\"#{ $icon }#{ $icon }\""); }
}

View File

@ -3,7 +3,7 @@
$fa-css-prefix : fa !default; $fa-css-prefix : fa !default;
$fa-style : 900 !default; $fa-style : 900 !default;
$fa-style-family : "Font Awesome 6 Free" !default; $fa-style-family : "Font Awesome 6" !default;
$fa-display : inline-block !default; $fa-display : inline-block !default;

View File

@ -24,3 +24,23 @@
.#{$fa-css-prefix}-duotone { .#{$fa-css-prefix}-duotone {
font-weight: 900; font-weight: 900;
} }
.fad:before,
.#{$fa-css-prefix}-duotone:before{
position: absolute;
color: var(--fa-primary-color,inherit);
opacity: var(--fa-primary-opacity,1);
}
.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-swap-opacity:before,
.#{$fa-css-prefix}-duotone:after, .#{$fa-css-prefix}-swap-opacity
.#{$fa-css-prefix}-duotone:before, .#{$fa-css-prefix}-swap-opacity
.fad:before,
.fad.#{$fa-css-prefix}-swap-opacity:before,
.fad:after {
opacity: var(--fa-secondary-opacity,.4);
}
.#{$fa-css-prefix}-duotone:after, .fad:after {
color: var(--fa-secondary-color,inherit);
}

View File

@ -12,7 +12,7 @@
} }
@font-face { @font-face {
font-family: 'Font Awesome 6 Free'; font-family: 'Font Awesome 6';
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
font-display: $fa-font-display; font-display: $fa-font-display;

View File

@ -12,7 +12,7 @@
} }
@font-face { @font-face {
font-family: 'Font Awesome 6 Free'; font-family: 'Font Awesome 6';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: $fa-font-display; font-display: $fa-font-display;

View File

@ -12,7 +12,7 @@
} }
@font-face { @font-face {
font-family: 'Font Awesome 6 Free'; font-family: 'Font Awesome 6 Sharp';
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
font-display: $fa-font-display; font-display: $fa-font-display;

View File

@ -12,7 +12,7 @@
} }
@font-face { @font-face {
font-family: 'Font Awesome 6 Free'; font-family: 'Font Awesome 6';
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
font-display: $fa-font-display; font-display: $fa-font-display;

View File

@ -12,7 +12,7 @@
} }
@font-face { @font-face {
font-family: 'Font Awesome 6 Free'; font-family: 'Font Awesome 6';
font-style: normal; font-style: normal;
font-weight: 100; font-weight: 100;
font-display: $fa-font-display; font-display: $fa-font-display;