带有图像标签的 Nativescript Vue 字体图标大小答案

【问题标题】：Nativescript Vue Font Icon Size with Image tag带有图像标签的 Nativescript Vue 字体图标大小
【发布时间】：2020-04-05 23:49:09
【问题描述】：

当我使用 Image 标签时如何设置字体图标的大小？我尝试使用 app.scss，但图标是最大尺寸。我找不到任何其他文档。

nativescript vue fontawesome size with image tag

小图标带有 Fontawesome 4.7 和按钮标签。他们是ОК。大图标带有 Fontawesome 5 和 Image 标签。

<Image col="3" src.decode="font://&#xf004;" class="fas" stretch="none" />

app.scss

.fas {
    font-family: "Font Awesome 5 Free Solid", "fa-solid-900";
    font-weight: 900;
    font-size: 12;
}

【问题讨论】：

那是 iOS 标签视图吗？您是否尝试将文本与图标一起设置？如果结果相同，您能否分享一个可以重现问题的 Playground 示例。
谢谢你，Manoj！这是带有 RadListView 的 Android 页面。您关于我在哪里使用图像标签的问题帮助我找到了问题。如果在的中使用了图像标签，则字体大小的 CSS 将被忽略。其他任何地方都可以正常工作。我将在没有图像标签的情况下工作或寻找其他尺寸调整解决方案。

标签： nativescript nativescript-vue

【解决方案1】：

我认为带有图像标签的字体图标大小在 RadListView (Android) 中被忽略了。

<Image  src.decode="font://&#xf004;" class="fas" stretch="none" /> - This is OK
<RadListView for="">
   <v-template>
      <GridLayout columns="auto,*">
         <button col="0"><FormattedString><Span class="fa" :text="'fa-thumbs-o-up' | fonticon" /><Span :text="10" /></FormattedString></button> - This is OK
         <Image col="1" src.decode="font://&#xf004;" class="fas" stretch="none" /> - This didn't work 
      </GridLayout>                     
   </v-template>
</RadListView>

app.scss

.fa {
    font-family: FontAwesome; //Font Awesome 4.7
 }

.fas {
    font-family: "Font Awesome 5 Free Solid", "fa-solid-900";
    font-weight: 900;
    font-size: 12;
}

【讨论】：