how use icon [Font-awesome] in WPF

Question

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

I install Font-awesome resource to my application.

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

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

PM > Install-Package FontAwesome.WPF

Step 2 : Add Resource

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

Step 3 : Put 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

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

Step 5 :- Output

mahendra kamble · Accepted Answer · 2016-07-11T12:56:58.497

46

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

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.

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

Open MainWindow.xaml and replace the grid with below snippet:

<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 Unicode for Heart.

Cheat Sheet

edited Jul 11 '16 at 12:56

answered Jul 11 '16 at 11:15

mahendra kamble

1,375
1
14
24

Not able to get font – shivani Jul 11 '16 at 11:29
can you post your code, what you have done until now?? – mahendra kamble Jul 11 '16 at 11:58
did you add "fontawesome-webfont.ttf" file to your font folder? – mahendra kamble Jul 11 '16 at 12:49
3

@mahendrakamble, what do you think about using NuGet package, like on this page: https://github.com/charri/Font-Awesome-WPF/blob/master/README-WPF.md ? – Niko May 09 '17 at 15:49
1

@Niko this package seems as it is no long maintained (last commit 3 years ago), I use this library and I plan to move to a fork of it https://github.com/MartinTopfstedt/FontAwesome5 – Jonas Marty Sep 12 '19 at 13:16

score 27 · Answer 2 · answered Mar 02 '18 at 12:31

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-desktop folder, 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.otf for 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.

score 10 · Answer 3 · answered May 19 '20 at 20:28

10

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:

FontAwesome5 on NuGet.org

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

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

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

Then simply add the following namespace to your XAML document:

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.

answered May 19 '20 at 20:28

Logix

530
6
15

How can I add the font itself? For instance, I want to use `fa-solid-900.ttf` from the FontAwesome. In the past I just had to add this file to the project and to reference it. But what should I do to include this font from the NuGet? I tried ``, for a style, but I don;t understand what `#FontAwesome` is? How it is guaranteed that I use exactly `fa-solid-900.ttf`? – deralbert Nov 04 '20 at 08:38
Have you tried setting the font weight? You'll very likely be using the solid variant of the font if the `Icon` property has "Solid_" at the start, and if you can find out which `FontWeight` correlates to a weight of 900, that ought to do it. – Logix Nov 09 '20 at 05:00
1

The documentation for the package can be found here, perhaps this will help: [https://github.com/MartinTopfstedt/FontAwesome5](https://github.com/MartinTopfstedt/FontAwesome5) and [https://github.com/charri/Font-Awesome-WPF/blob/master/README-WPF.md#usage-xaml](https://github.com/charri/Font-Awesome-WPF/blob/master/README-WPF.md#usage-xaml) (the 2nd link is not from the package's developer, but is linked to by the developer in the plugin's readme). – Logix Nov 09 '20 at 05:32
This is significantly easier than the older way of doing it. Thanks for the tip! – The Senator Jun 29 '22 at 11:32

score 1 · Answer 4 · answered Aug 26 '16 at 09:07

1

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

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

answered Aug 26 '16 at 09:07

Uchenna Nnodim

458
4
11

how use icon [Font-awesome] in WPF

4 Answers4

Linked