Contents tagged with FontAwesome

• Using FontAwesome in Universal Apps

  Tuesday, October 14, 2014

  Universal Apps FontAwesome

  No Comments

  Want to use FontAwesome in Universal Apps (both Windows Phone & Windows 8.1). The procedure is similar to how you do it for WPF:

  1) Install-Package FontAwesome

  2) Mark the file /fonts/fontawesome-webfont.ttf with “Build Action” set to “Content” (not “Resource”)

  3) Try out the font like this in a sample Windows Phone main page:

  <Viewbox>
      <TextBlock Text="&#xf09b;"                 FontFamily="fonts/fontawesome-webfont.ttf#FontAwesome" />
  </Viewbox>
  

  And you should see:

  

  Note that the steps and syntax is a bit different from how you do it in WPF.

• Using FontAwesome in WPF

  Tuesday, October 14, 2014

  WPF FontAwesome

  No Comments

  Want to use FontAwesome (http://fontawesome.io/) in your WPF application? With a few simple steps you can do it.

  1) Use Nuget and Install-Package FontAwesome

  2) Mark the file /fonts/fontawesome-webfont.ttf and set it’s “Build Action” to “Resource”

  3) Test the font in a simple TextBlock like this:

  <Window x:Class="FontAwesomeWPFBlogTest.MainWindow"         
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         
      Title="MainWindow"         
      Height="350"         
  Width="525">
      <Grid>
          <Viewbox>
              <TextBlock Text="&#xf09b;"
                          FontFamily="pack://application:,,,/fonts/#FontAwesome" />
          </Viewbox>
      </Grid>
  </Window>
  

  Run it and you should see this:

  

  The “hardest” thing is to make sure you enter the right icon-hexcode for the Text property. You can look at the different icons available in the icon-gallery page on http://fontawesome.io/icons/ then check the name of the icon you like. After that, go to the /Contents/font-awesome.css file in your project and look it up there, say for example the paint-brush icon:

  .fa-paint-brush:before {   content: "\f1fc";
  }
  

  The content-value says “\f1fc” which is the hex value of the paint-brush symbol in the font and that is the value you have to enter in the Text-property in your XAML:

  Text=”&#f1fc;”