how use icon [Font-awesome] in WPF

shivani picture shivani · Jul 11, 2016 · Viewed 33.1k times · Source

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

My Output is this

Answer

mahendra kamble picture mahendra kamble · Jul 11, 2016

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

enter image description here

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.

enter image description here

<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