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

Question

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

wpfwpf-controlsfont-awesome

33

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

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

请告诉我如何使用它的方法。

非常感谢您的帮助。

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

示例

步骤1：下载Font-Awesome

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

PM> Install-Package FontAwesome.WPF

步骤2：添加资源

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

第三步：放置App.xaml。

<Application.Resources>

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

</Application.Resources>

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

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

第 5 步：输出

- shivani

4个回答

27

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

下载FontAwesome
解压缩文件
在解压后的文件夹下，进入use-on-desktop文件夹，找到您想要的版本。注意：Solid版本拥有最多免费图标；某些图标需要付费购买Regular和Light版本。
- 对我来说，这是Font Awesome 5 Free-Solid-900.otf。
按照已接受的答案和大多数教程的要求，首先在C#项目中创建一个名为Fonts的子文件夹。将字体文件粘贴到此文件夹中。
我将此文件重命名为FontAwesome.otf以简洁明了。
设置此文件的属性：
- Build Action: Resource
- Copy to Output Directory: Copy if newer/Copy always
在您的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。
不要安装字体，否则您将无法验证是否正确执行了这些步骤，并且在未安装该字体的计算机上该字体可能无法正常工作。

- Slate

11

我知道这是一个旧问题，当时可能没有这个选项可用，所以我想为任何遇到类似问题的人提供一种更新的方法。我建议您从以下位置安装NuGet软件包 'FontAwesome5'：

NuGet.org上的FontAwesome5

或在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会向您显示所有可用图标的列表，使您免去了去网站上搜索它们的麻烦。

- Logix

我该如何添加字体本身？例如，我想使用FontAwesome中的fa-solid-900.ttf。过去我只需要将此文件添加到项目中并引用它即可。但是，我应该怎么做才能从NuGet中包含这个字体呢？我尝试了一个样式<Setter Property="FontFamily" Value="pack://application:,,,/FontAwesome5;component/#FontAwesome"/>，但我不明白#FontAwesome是什么？如何确保我使用的是fa-solid-900.ttf？ - deralbert

你尝试过设置字体加粗吗？如果“Icon”属性以“Solid_”开头，很可能你会使用字体的实心变体，并且如果你能找出哪种“FontWeight”对应于900的字重，那么它就应该可以做到。 - Logix

1

该软件包的文档可以在此处找到，也许这会有所帮助：https://github.com/MartinTopfstedt/FontAwesome5 和 https://github.com/charri/Font-Awesome-WPF/blob/master/README-WPF.md#usage-xaml（第二个链接不是软件包开发者提供的，但是开发者在插件的自述文件中提供了链接）。 - Logix

这比以前的方法明显更容易。感谢您的提示！ - The Senator

1

你可以手动从TextBlock的FontFamily属性中选择FontAwesome。这将解决问题。如果FontAwesome不在字体列表中，那么你可能需要像第一个答案建议的那样导入字体文件。

- Uchenna Nnodim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mahendra kamble · Accepted Answer

首先，下载Font Awesome，解压ZIP文件并将 fonts/fontawesome-webfont.ttf 复制到你的解决方案中的 Fonts 文件夹中。如果尚未设置构建操作属性，请将其设置为资源。

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

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

打开 MainWindow.xaml 文件，将其中的 grid 替换为以下代码片段：

<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" 属性，它是表示 Heart 的 Unicode。

速查表