如何在 WPF 中使用图标 [Font-awesome]

Question

我是 WPF 的新手。我想在文本框和按钮中使用 Font-awesome Icon。但该图标未与我的文本框绑定

我将 Font-awesome 资源安装到我的应用程序中。

告诉我如何使用它

谢谢，

我真的需要它，请帮帮我..

Example

第 1 步：下载 Font-Awesome

工具 -> 库包管理器 -> 包管理器控制台 安装

PM > 安装包 FontAwesome.WPF

第 2 步：添加资源

<Application> xmlns:fa="http://schemas.fontawesome.io/icons/" </Application>

第 3 步：放置 App.xaml

<Application.Resources>

    <Style x:Key="FontAwesome">
        <Setter Property="TextElement.FontFamily" Value="pack://application:,,,/fonts/#FontAwesome" />
    </Style>

</Application.Resources>

第 4 步：在 Demo.xaml 中使用它

<TextBlock Style="{StaticResource FontAwesome}"
FontSize="75"
Text="&#xf133;" />

第 5 步：- 输出

Answer 1

首先，下载 Font Awesome，解压缩 ZIP 文件并将 fonts/fontawesome-webfont.ttf 复制到解决方案中的 Fonts 文件夹中。如果还没有，请将属性中的 Build Action 设置为 Resource

接下来，为App.xaml 中的资源添加样式。不要忘记字体名称前面的# 并记住使用字体的内部名称，而不是文件名。要检查字体名称，只需双击字体文件，它将在 Windows 字体查看器中打开。字体名称将位于顶部。

<Application.resources>
<FontFamily x:Key="FontAwesome">/Fonts/fontawesome-webfont.ttf#FontAwesome</FontFamily>
</Application.resources>

打开MainWindow.xaml，用下面的sn-p替换网格：

<Grid VerticalAlignment="Center" HorizontalAlignment="Center">

<StackPanel Orientation="Horizontal" >

<TextBlock Text="I" FontSize="32" Margin="10" VerticalAlignment="Center"></TextBlock>


<TextBlock x:Name="tbFontAwesome" Text="&#xf004;" FontFamily="{StaticResource FontAwesome}" Foreground="Red" FontSize="32" Margin="10" VerticalAlignment="Center"></TextBlock>
<TextBlock Text="Font Awesome" FontSize="32" Margin="10" VerticalAlignment="Center"></TextBlock>

</StackPanel>

</Grid>

注意"tbFontAwesome" 文本块的"Text" 属性，它是Unicode 的Heart。

Cheat Sheet

Answer 2

为了扩展已接受的答案，因为它有些过时且缺少信息，这就是我所做的：

• 下载FontAwesome
• 解压压缩包
• 在解压后的文件夹中，在use-on-desktop 文件夹下，找到您想要的版本。注： Solid 拥有最多的免费图标；一些图标需要专业版的普通版和轻量版付费。
  • 对我来说，这是Font Awesome 5 Free-Solid-900.otf。
• 按照接受的答案和大多数教程，首先在您的 C# 项目中创建一个名为 Fonts 的子文件夹。将字体文件粘贴到此文件夹中。
• 为简洁起见，我将此文件重命名为 FontAwesome.otf
• 设置此文件的属性：
  • 构建操作：资源
  • 复制到输出目录：如果较新则复制/始终复制
• 在您的 App.xaml <Application.Resources> 或其他 <ResourceDictionary> 中，插入：
• <FontFamily x:Key="FontAwesome">/YOUR_PROJECT_NAME;component/Fonts/FontAwesome.otf#Font Awesome 5 Free Solid</FontFamily>
  • 将 YOUR_PROJECT_NAME 替换为您的项目名称。我将其包含在内是因为如果您跨项目使用 MergedDictionaries，则需要它。
  • 如果您没有将文件放在项目子文件夹Fonts 中，请重命名或省略这部分路径。
  • 检查文件名是否匹配：将 FontAwesome.otf 替换为文件名（或重命名文件本身）。
  • 检查内部字体名称。您可以按照接受的答案执行此操作。 （从资源管理器中打开 .otf 或 .tff 文件以启动 Windows 字体查看器，复制字体名称）。
  • 将 Font Awesome 5 Free Solid 替换为字体名称（# 之后）。
  • 请勿安装该字体，否则您无法验证您是否正确执行了这些步骤，并且该字体可能无法在未安装该字体的计算机上运行。

Answer 3

我知道这是一个老问题，当时您可能无法使用此选项，所以我想我会为任何偶然发现此问题的人提供更新的方法。我建议您从这里安装 NuGet 包“FontAwesome5”：

FontAwesome5 on NuGet.org

或在 Visual Studio 的内置 NuGet 包管理器窗口中搜索 "fontawesome5"：

工具 > NuGet 包管理器 > 管理用于解决方案的 NuGet 包...

-当使用这个确切的搜索词时，它通常是最重要的结果。

然后只需将以下命名空间添加到您的 XAML 文档：

xmlns:fa5="http://schemas.fontawesome.com/icons/"

然后您应该会发现在项目中添加图标相对容易。例如：

<fa5:ImageAwesome Icon="Solid_ExclamationTriangle" Foreground="#FFFF7400"/>

或

<fa5:FontAwesome Icon="Solid_ExclamationTriangle" Foreground="#FFFF7400"/>

它的美妙之处在于，IntelliSense 会向您显示所有可用图标的列表，让您免去前往网站搜索它们的麻烦。

Answer 4

您也可以从 TextBlock 的 FontFamily 属性中手动选择 FontAwesome。这样可以解决问题。

如果 FontAwesome 不在字体列表中，那么您可能需要像第一个答案建议的那样导入字体文件。