如何在Xamarin应用的按钮上同时显示FontAwesome图标和普通文本

以下是3种可直接落地的实现方案，你可以根据项目情况选择：

方案1：使用Layout封装自定义组合按钮（推荐，灵活性最高） #

该方案不需要修改原生渲染器，跨平台适配性最好，支持高度自定义样式：

• 用Grid或者HorizontalStackLayout（Xamarin.Forms 5+版本支持）作为可点击容器，内部放两个Label分别承载图标和文本
  • 第一个Label指定FontFamily为你提前导入的FontAwesome字体，Text字段填对应图标的Unicode编码，设置适配的字号和边距
  • 第二个Label使用系统默认字体，放置你需要的普通文本
• 给外层Layout添加TapGestureRecognizer实现点击逻辑，也可以额外加按压态的背景变色动画，模拟原生按钮的交互反馈
  示例XAML代码：

<HorizontalStackLayout Spacing="8" Padding="12,8" BackgroundColor="#2196F3" CornerRadius="4">
    <Label Text="&#xf007;" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="16" TextColor="White" VerticalOptions="Center"/>
    <Label Text="个人中心" FontSize="16" TextColor="White" VerticalOptions="Center"/>
    <HorizontalStackLayout.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnUserCenterButtonTapped"/>
    </HorizontalStackLayout.GestureRecognizers>
</HorizontalStackLayout>

你可以把这段逻辑封装成自定义控件，统一配置样式后在全项目复用。

方案2：使用FormattedString属性直接在Button内混合字体 #

Xamarin.Forms原生Button支持FormattedText属性，可以拼接多个不同样式的Span，直接实现同一段文本内混用两种字体，不需要额外封装布局：
示例C#代码：

var button = new Button();
var formattedString = new FormattedString();
formattedString.Spans.Add(new Span { Text = "\uf007 ", FontFamily = (FontFamily)Application.Current.Resources["FontAwesomeSolid"], FontSize = 16 });
formattedString.Spans.Add(new Span { Text = "个人中心", FontSize = 16 });
button.FormattedText = formattedString;

XAML写法：

<Button BackgroundColor="#2196F3" TextColor="White" Padding="12,8">
    <Button.FormattedText>
        <FormattedString>
            <Span Text="&#xf007; " FontFamily="{StaticResource FontAwesomeSolid}" FontSize="16"/>
            <Span Text="个人中心" FontSize="16"/>
        </FormattedString>
    </Button.FormattedText>
</Button>

该方案的优势是可以直接复用原生Button的所有特性，包括自带的点击效果、命令绑定等，不需要额外处理交互逻辑。

方案3：使用第三方控件库简化实现 #

如果你的项目已经引入了Xamarin Community Toolkit等常用控件库，可以直接用里面的扩展ImageButton控件，或者预先封装好的带图标按钮组件，直接把FontAwesome图标作为图像源传入，配合文本属性即可使用，不需要自己写布局逻辑。

通用注意事项 #

• 提前把FontAwesome的字体文件导入到各个平台的项目中，并且在App的资源字典里注册统一的FontFamily键名，避免每个页面重复配置
• 图标和文本之间可以加一个空格调整间距，也可以通过Span的Margin属性微调对齐效果

内容的提问来源于stack exchange，提问作者Fooourier