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

how use icon [Font-awesome] in WPF

提问by shivani

I am new in WPF. I want to use Font-awesome Icon in textbox and button. but the icon is not bind with my textbox

我是 WPF 的新手。我想在文本框和按钮中使用字体真棒图标。但图标未与我的文本框绑定

I install Font-awesome resource to my application.

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

Let me know the way how can I use it

让我知道如何使用它

Thank You,

谢谢你，

I really need it please help me..

我真的很需要请帮帮我..

Example

例子

Step 1 : Download Font-Awesome

第 1 步：下载 Font-Awesome

Tools -> Library Package Manager -> Package Manager Console Install

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

PM > Install-Package FontAwesome.WPF

PM > 安装包 FontAwesome.WPF

Step 2 : Add Resource

第 2 步：添加资源

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

Step 3 : Put App.xaml

第 3 步：放置 App.xaml

<Application.Resources>

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

</Application.Resources>

Step 4 : Use it in Demo.xaml

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

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

Step 5 :- Output

第 5 步：- 输出

回答by mahendra kamble

First, download Font Awesome, extract the ZIP file and copy fonts/fontawesome-webfont.ttfinto a Fonts folder in your solution. Set the Build Action in the properties to Resource if it isn't already

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

Next, add a Style to the Resources in App.xaml. Don't forget the #at the front of the font name and remember to use the internal name of the font, not the name of the file. To check the name of the font, just double click on the font file and it will open in the Windows Font Viewer. The font name will be at the top.

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

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

Open MainWindow.xamland replace the grid with below snippet:

打开MainWindow.xaml并使用以下代码段替换网格：

<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>

Notice "Text"property of "tbFontAwesome"textblock, its the Unicodefor Heart.

注意textblock 的"Text"属性 "tbFontAwesome"，它的Unicodefor Heart。

Cheat Sheet

备忘单

回答by kjhf

To extend the accepted answer because it's somewhat out of date and missing information, here's what I did:

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

• Download FontAwesome
• Unzip the archive
• Inside the unzipped folder, under the use-on-desktopfolder, locate the version you want. N.B. Solid has the most icons free; some icons require a Pro payment for Regular and Light versions.
  • For me, this was Font Awesome 5 Free-Solid-900.otf.
• Following the accepted answer and most tutorials, first create a sub-folder in your C# project named Fonts. Paste the fonts file inside this folder.
• I renamed this file FontAwesome.otffor brevity
• Set the properties of this file:
  • Build Action: Resource
  • Copy to Output Directory: Copy if newer/Copy always
• In your App.xaml <Application.Resources>or other <ResourceDictionary>, insert:
• <FontFamily x:Key="FontAwesome">/YOUR_PROJECT_NAME;component/Fonts/FontAwesome.otf#Font Awesome 5 Free Solid</FontFamily>
  • Replace YOUR_PROJECT_NAME with your project name. I include this because it is needed should you use MergedDictionaries across projects.
  • If you did not place the file in a project sub-folder Fonts, rename or omit this part of the path.
  • Check that the filename matches: replace FontAwesome.otf with the filename (or rename the file itself).
  • Check the internal font name. You can do this by following the accepted answer. (Open the .otf or .tff file from explorer to start Windows Font Viewer, copy the font name).
  • Replace the Font Awesome 5 Free Solid with the font name (after the #).
  • Do not install the font otherwise you cannot verify that you have followed these steps correctly and the font may not work across computers that do not have the font installed.

• 下载FontAwesome
• 解压存档
• 在解压后的文件夹中，在use-on-desktop文件夹下找到您想要的版本。NB 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 替换为字体名称（# 之后）。
  • 请勿安装该字体，否则您将无法验证您是否正确执行了这些步骤，并且该字体可能无法在未安装该字体的计算机上使用。

回答by Uchenna Nnodim

You could as well manually select FontAwesome from the FontFamily property of the TextBlock.That will solve the problem.

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

If FontAwesome is not among the list of fonts then you probably need to import the font file just like the first answer suggested.

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

回答by Logix

I know this is an old question, and this option may not have been available to you at the time, so I thought I would provide an updated method for anyone who stumbles across this. I recommend you install the NuGet package 'FontAwesome5' from here:

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

FontAwesome5 on NuGet.org

NuGet.org 上的 FontAwesome5

or search "fontawesome5"in Visual Studio's built-in NuGet Package Manager window:

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

Tools > NuGet Package Manager > Manage NuGet Packages for Solution...

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

-it is usually the top result when using this exact search term.

- 它通常是使用此精确搜索词时的最佳结果。

Then simply add the following namespace to your XAML document:

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

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

and then you should find relative ease in adding icons to your project. For example:

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

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

or

或者

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

And the beauty of this is that IntelliSense will show you a list of all available icons, saving you the hassle of going to the website to search them up.

这样做的好处在于，IntelliSense 会向您显示所有可用图标的列表，让您免去前往网站进行搜索的麻烦。