jon

@jon

alive since '87 _ professional web developer

1,097 words

https://www.jon.app @sucrose Guestbook
You'll only receive email when jon publishes a new post

How to integrate Font Awesome into a C# WPF Application (Visual Studio 2019)

If you're a front-end web developer, you've most certainly heard of Font Awesome. To sum it up briefly, it's a font family used primarily on the web as a quick and easy icon solution. It's distributed in a wide variety of file formats for your convenience: SVG, OTF, TTF, EOT, and WOFF/WOFF2.

For this tutorial, we'll be using the OpenType (OTF) format obtained from the free desktop package. (OpenType has several exclusive capabilities such as support for both Windows and Macintosh systems and expanded character sets. Learn more about the differences between OpenType and TrueType.)

  1. Download the free official Font Awesome desktop package. (Extract the ZIP archive to a convenient location.) [screenshot]
  2. Create a new project in Visual Studio [screenshot]
  3. Select WPF App (.NET Framework), click Next, name your project, then click Create [screenshot]
  4. Inside the Solution Explorer window, right-click the project name, click Add → New Folder (name the folder "Fonts") [screenshot]
  5. Right-click the Fonts folder you created, click Add → Existing Item..., browse to the Font Awesome directory you extracted the ZIP archive contents into, select the "Font Awesome 5 Free-Regular-400.otf" file from the ...\fontawesome-free-5.8.1-desktop\otfs\ directory. You may need to change the File Dialog filter to All Files (*.*) to see the file. [screenshot]
  6. Right-click App.xaml, click Open, then in the XAML window add the following line of code inside the <Application.Resources> tag:  <FontFamily x:Key="FontAwesome">/Fonts/Font Awesome 5 Free-Regular-400.otf#Font Awesome 5 Free</FontFamily>  [screenshot]
  7. Switch to the MainWindow.xaml tab, then in the XAML window add the following line of code inside the <Grid> tag:  <TextBlock x:Name="TextBlock1" FontFamily="{StaticResource FontAwesome}" Text="&#xf004;" HorizontalAlignment="Center" Margin="0" TextWrapping="Wrap" VerticalAlignment="Center" FontSize="100"/>  [screenshot]
  8. At this point, inside the Design window you'll notice a heart icon in the middle of the MainWindow GUI.

Explanation

For the FontFamily property of the TextBlock we used, we're linking to the static resource key we added in Step 6. (The x:Key attribute value can be changed if you prefer something different.)  You must use the Unicode value of the icons in the Text property for them to display properly. (Font Awesome Unicode values can be found in the icon gallery.)

Resource Item Scope

You're able to reference the Font Awesome resource anywhere in the application because we used <Application.Resources> in Step 6. If for any reason the application-wide scope is undesirable, you can instead insert the code snippet within a <Window.Resources> tag inside any window's XAML to confine the scope to that window only. [screenshot]

<Window>'s FontFamily

Another less popular method would be to set a <Window>'s FontFamily property value to the two-part font resource reference: the base uniform resource identifier (URI); and the font location reference. For example:  FontFamily="/FontAwesome-Example;component/Fonts/#Font Awesome 5 Free Regular"  (The downside to this method is that every component in the window will then inherit the FontFamily.) [screenshot]

Referencing Font Resources from Code

You can also set the FontFamily of components in your C# code. For example:  TextBlock1.FontFamily = new FontFamily(new Uri("pack://application:,,,/"), "./Fonts/#Font Awesome 5 Free");  This could be useful when creating components dynamically. [screenshot]



Commence your backups

DigitalOcean has been my favorite VPS hosting provider for over half a decade. Their implementation of spinning up server instances is as easy as it gets and takes merely seconds out of my ridiculous worklife. I try and take advantage of all the services/features they offer. I've increased usage and prioritization of three of these features: snapshots, backups and third-party access. If you're like me and curious as to the difference between snapshots and backups: The main difference between the two is that snapshots can be generated manually, while backups are run automatically weekly.

As of recenly, I've commenced improvement upon one of my digital bad habits: I never seem to get around to generating backups of my DO droplets. Although automating this process may be trivial to some, it's always seemed tedious to me; luckily DO comes to the rescue and provides an easy way to do it from the droplet's dashboard with a simple click of the mouse... but for a small price of $1.00 per month (for scheduled backups, not manual snapshots). It's a small price, but I'm cheap and I don't want to pay it. Combining snapshots with third-party access is the golden ticket. That's when my new friend gets involved.

BackupSheep's free tier only allows for 1 backup schedule, but they don't limit features between the tiers. They provide a way for you to easily link your hosting provider(s) to their service. I actually prefer using BackupSheep as an alternative to DigitalOcean's native backups because of the flexibility and the amount of features they provide. You can store the backups on your own storage (Bring-Your-Own-Storage): AWS, DropBox, Google Drive, etc. They provide timezone-aware schedules, compression of backups, 2FA, SSH access, and the list goes on. I began using them this month and so far every backup has been successful and are taken within the minute of the time I scheduled.


If you're interested in DigitalOcean and/or BackupSheep, please show me love by signing-up using my referral links:

  1. DigitalOcean
  2. BackupSheep