0

Intro

I want to use the same Font Awesome 5 icons in the mobile app as I do on a website.

The following XAML snippet shows the icon perfectly.

<!-- Events.xaml -->

<Label Text="&#xf51c;" FontFamily="{StaticResource FA-Solid}" />

I wish to bind the data received from JSON to the Text value for this icon.

The problem is that I can't convert Font Awesome code to a working Unicode in C#, and sending the Unicode directly adds a backslash before the code in JSON. Note that the letter č is correctly converted to it's Unicode equivalent in JSON. But how do I send the actual icon to JSON for it to convert it to the correct Unicode?

Creating JSON [PHP]

# api.php

$data = fetch_database_table_into_associative_array(); // Function made up for explanation
/*
[
  0 => [
    'title' => 'Tečaj',
    'icon' => 'f51c',
  ],
  1 => [ ... ],
  ...
]
*/

die(json_encode(['events' => $data]));
/*
{
   "events":[
      {
         "title":"Te\u010daj",
         "icon":"f51c"
      },
      {
         ...
      },
      ...
   ]
}
*/

Receiving and converting response [C#]

Fetching data asynchronously with HttpClient.GetAsync, reading it to string and deserializing to my object works perfectly well.

Event is

public class Event
{
  [JsonProperty("title")]
  public string Title { get; set; }

  [JsonProperty("icon")]
  public string Icon { get; set; }
}

and collection of all events is List<Event> Events with data filled.

Attempt 1

<!-- Events.xaml -->

<Label Text="{Binding Icon}" FontFamily="{StaticResource FA-Solid}" />

This (obviously) renders text f51c.

Attempt 2

<!-- Events.xaml -->

<Label Text="&#x{Binding Icon};" FontFamily="{StaticResource FA-Solid}" />

This fails to bind anything.

Attempt 3

Added property FormattedIcon to model Event and tried

// Events.cs

foreach (var Event in Events)
{
  Event.FormattedIcon = "&#x" + Event.Icon + ";";
}
<!-- Events.xaml -->

<Label Text="{Binding FormattedIcon}" FontFamily="{StaticResource FA-Solid}" />

This renders Unicode (I think without the ending ;) instead of icon.

Attempt 4

After reading that &#x...; format is for XAML and \u... for code-behind on SO I changed the statement from inside the foreach loop (Attempt 3)

// Events.cs

foreach (var Event in Events)
{
  Event.FormattedIcon = "\u" + Event.Icon;
}

This causes an error and does not compile.

Attempt 5

Same as above but tried to escape the backslash.

// Events.cs

foreach (var Event in Events)
{
  Event.FormattedIcon = "\\u" + Event.Icon;
}

Renders the Unicode again (in different format than Attempt 3).

Attempt 6 & 7

Went back to JSON creation in PHP and replaced 'icon' => 'f51c' with 'icon' => '\uf51c' as well as 'icon' => "\uf51c", and in both cases json_encode converted the icon string into \\uf51c ie. backslash was added before string.

So lastly I tried to remove just the first backslash in code-behind with

// Events.cs

foreach (var Event in Events)
{
  Event.FormattedIcon = Event.Icon.Substring(1);
}

but it just removed the escaped backslash and rendered uf51c;

Attempt 8

Changed JSON data back to just 'icon' => 'f51c'. Changed string FormattedIcon to char FormattedIcon in model Event. Tried to read string as Unicode character.

// Events.cs

foreach (var Event in Events)
{
  int characterCode = Convert.ToInt32(Event.Icon);
  Event.FormattedIcon = (char)characterCode;
}

Error with converting

Attempt 9

Changed char FormattedIcon back to string FormattedIcon in model Event as per SO.

// Events.cs

foreach (var Event in Events)
{
  int characterCode = int.Parse(Event.Icon, System.Globalization.NumberStyles.HexNumber);
  Event.FormattedIcon = Char.ConvertFromUtf32(characterCode);
}

Error with converting (System.FormatException: 'Input string was not in a correct format.')

Help

Any suggestions on lucky number 10 ?

s3c
  • 1,481
  • 19
  • 28
  • Use [base64](https://learn.microsoft.com/en-us/dotnet/api/system.convert.tobase64string?view=net-5.0) encode/decode. – Max Aug 23 '21 at 10:23
  • Try to create a static class with constant value such as `public const string Adjust = "\uf042";` and try to use it like this ``. Is this work? – dbraillon Aug 23 '21 at 10:24
  • @Max Thank you for pointing in some direction. I tried converting my Unicode into base64 in PHP, but on `json_encode()` the `\xXX\xYY\xZZ` got converted into `\\xXX\\xYY\\xZZ` so it was about as useful as before. I would love to get a proper answer, but for the time being I just used a plain `switch` statement, for the limited number of used cases (4). – s3c Aug 24 '21 at 09:56
  • You must use only base64 without json, encode on base64 -> send -> decode base64. – Max Aug 24 '21 at 10:14
  • Thanks again, but sadly specs demand JSON. – s3c Aug 24 '21 at 10:21

0 Answers0