C# WPF 按钮加载字体图标 / 动物头像

C# WPF：系统字体图标（Segoe MDL2 / Segoe Fluent）+ 动物头像方案

核心：系统字体图标本质是特殊字体里的字符（Glyph），不是图片 ，优点：矢量、缩放不失真、改颜色只改Foreground，无图片资源；Windows自带，无需额外文件。

⚠️ Windows自带Segoe字体没有动物头像glyph，动物头像两种方案：① 用免费图标字体（如Font Awesome）；② PNG图片。

一、Segoe MDL2 Assets（Win10 自带）

XAML 直接写按钮（最常用）

<Button Width="160" Height="44">
    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
        <!-- 字体图标 -->
        <TextBlock FontFamily="Segoe MDL2 Assets"
                   FontSize="22"
                   Foreground="#222222"
                   Text="&#xE78B;"/>
        <TextBlock Text=" 文件夹" Margin="8,0,0,0"/>
    </StackPanel>
</Button>

常用 Glyph 编码：

字符码	含义
	文件夹
	主页
	警告
	信息
	搜索
	设置

编码格式：&#xXXXX;，XXXX是十六进制Unicode码。

二、Segoe Fluent Icons（Win11 自带，新版）

Win11推荐用这个，图标更现代：

<TextBlock FontFamily="Segoe Fluent Icons" FontSize="22" Text="&#xF14F;"/>

注意：Segoe Fluent 在Win10上不存在 ，会 fallback 到默认字体，图标乱码。

兼容建议：需要同时支持Win10+Win11优先使用 Segoe MDL2 Assets。

三、后台C#动态赋值字体图标

// 给TextBlock设置字体图标
textBlockIcon.FontFamily = new FontFamily("Segoe MDL2 Assets");
textBlockIcon.Text = "\uE78B";  // 注意C#字符串写法：\u + 4位十六进制，不要&#x
textBlockIcon.FontSize = 22;

✅ C#代码内："\uE78B"

✅ XAML内：

四、封装一个【字体图标按钮】可复用模板

放到Window.Resources，一键复用：

<Window.Resources>
    <Style x:Key="GlyphButtonStyle" TargetType="Button">
        <Setter Property="Width" Value="160"/>
        <Setter Property="Height" Value="44"/>
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <TextBlock x:Name="GlyphIcon"
                                   FontFamily="Segoe MDL2 Assets"
                                   FontSize="22"
                                   Foreground="#333"/>
                        <TextBlock x:Name="LabelText" Margin="8,0,0,0" VerticalAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<!-- 使用 -->
<Button Style="{StaticResource GlyphButtonStyle}" x:Name="btnTest"/>

后台设置图标和文字：

// 查找模板内控件
private void SetButtonGlyph(Button btn, string glyph, string text)
{
    var templateRoot = btn.Template.FindName("GlyphIcon", btn) as TextBlock;
    var label = btn.Template.FindName("LabelText", btn) as TextBlock;
    if(templateRoot != null) templateRoot.Text = glyph;
    if(label != null) label.Text = text;
}

//调用
SetButtonGlyph(btnTest, "\uE78B", "我的文件夹");

五、动物头像（字体图标方案：Font Awesome）

Windows系统自带Segoe字体没有动物 ，所以要引入第三方图标字体 Font Awesome（免费版有猫狗、鸟类等动物glyph）。

步骤

1. 下载 Font Awesome 免费字体 fontawesome-free-6.x-web.zip

2. 把 fa-solid-900.ttf 放到项目，生成操作=资源

3. XAML引用字体，按钮使用动物图标：

常用动物 solid glyph：

猫 ，狗 ，鸟 ，鱼 

备选：不想引入字体 → 动物头像用PNG图片

<Button Width="160" Height="44">
    <StackPanel Orientation="Horizontal">
        <Image Width="24" Height="24" Source="pack://application:,,,/Resources/cat.png"/>
        <TextBlock Text="小猫" Margin="8,0,0,0"/>
    </StackPanel>
</Button>

六、常见踩坑

1. 乱码方框 □：字体不存在。Segoe Fluent 只能Win11；Win10只能Segoe MDL2 Assets。
2. 字体图标是矢量，只改Foreground改颜色，不能像图片那样单独调色。
3. 字体图标不支持渐变蒙版（可以用VisualBrush做复杂效果，复杂则改用图片）。
4. 发布程序：Segoe MDL2/FLuent是Windows系统自带，不用打包；Font Awesome字体必须打包进程序。

七、小工具推荐

Segoe MDL2图标查询网站：https://learn.microsoft.com/zh-cn/windows/apps/design/style/segoe-ui-symbol-font

可以直接复制glyph编码。

如果你想要，我可以直接给你一个WPF窗口，带预览面板，下拉切换Segoe MDL2所有图标。