question

10918804 avatar image
0 Votes"
10918804 asked ·

Custom Font not working

Hi,

i am trying to use Font Awsome as the custom font in my app.

I added the icon and set it to EmbeddedResources and added:

[assembly: ExportFont("FontAwesomeRegular.otf", Alias = "FontRegular")]

but I am not getting the icon shown and it just shows the default question mark instead..

 <Image>
 <Image.Source>
     <FontImageSource Grid.Column="4" FontFamily="FontRegular" Color="Black" Glyph="&#xf004;"/>
 </Image.Source>
 </Image>

Kindly help..


Thanks,
Jassim

dotnet-xamarinforms
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ColeXia-MSFT avatar image
0 Votes"
ColeXia-MSFT answered ·

I test on my side , the icon shows as expected .

74589-2.png

Check the following steps :

  • Go to Font Awesome website and download the font file .

74500-cap77777ture.png

  • Copy the file into shared project , notice : I select Solid not Regular .

74506-capture.png

74576-3.png

  • Set its build Action to Embedded resource .

74559-4.png

  • Add the following code into AssemblyInfo.cs

[assembly: ExportFont("Font Awesome 5 Free-Solid-900.otf", Alias = "customFont")]

  • Usage in Page.

<Image>
 <Image.Source>
     <FontImageSource Grid.Column="4" FontFamily="customFont" Color="Black" Glyph="&#xf004;"/>
 </Image.Source>
 </Image>





2.png (16.7 KiB)
cap77777ture.png (43.4 KiB)
capture.png (16.2 KiB)
3.png (7.2 KiB)
4.png (9.8 KiB)
· 2 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Yeah that is the problem, the Solid is working fine but when I choose Regular it does not work and i want some icons from the Regular

0 Votes 0 ·

I will try different fonts ...

0 Votes 0 ·
sphauck avatar image
0 Votes"
sphauck answered ·

I am having this issue as well

I have imported the font like so
[assembly: ExportFont("FontAwesome5Pro_Light_300.otf", Alias = "FA5Light300")]

I have a font and it's set to "Embedded Resource"
74888-image.png

In my XAML for the AppShell.xaml I have this ...
74836-image.png

This uses a namespace to point to the string value for "Sync" contained in FA5ProLight300.cs
xmlns:fontAwesome="clr-namespace:XXXamarin.Fonts;assembly=XXXamarin"
fontAwesome:FA5ProLight300.Sync

I have even tried the escaped value and that doesn't work ether ....



image.png (14.8 KiB)
image.png (29.9 KiB)
·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

sphauck avatar image
0 Votes"
sphauck answered ·

I generated a class with constants using this ...
https://andreinitescu.github.io/IconFont2Code/

Also just noticed .. I am running Visual Studio 2019 on WIndows with MFractor and it decodes things properly while running and I put my pointer over it in the XAML ...

74903-image.png



image.png (45.3 KiB)
·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

sphauck avatar image
0 Votes"
sphauck answered ·

So the awesome guys at Mfractor suggested I try the ttf instead of the otf and that did not make a difference

This works ...
75048-image.png


But this does not
75086-image.png


And again .. Mfractor knows what it is ....
75087-image.png


I even tried a different string constants file to no avail ...


image.png (11.2 KiB)
image.png (24.8 KiB)
image.png (22.7 KiB)
·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

sphauck avatar image
0 Votes"
sphauck answered ·

I have uploaded a simple app using the ttf file and a known good working string constants file from here
https://github.com/matthewrdev/fa2cs/blob/master/FontAwesomeIcons.cs


https://github.com/stephenhauck/FontAwesomeCustomFont

· 2 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I still have the same problem with font awesome regular

any solution

0 Votes 0 ·

Does Microsoft monitor this board or are we all alone here ?

0 Votes 0 ·
sphauck avatar image
0 Votes"
sphauck answered ·

Iv'e had this problem for over a week and it got closed in my previous report with no solution other than to come here ......

·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ColeXia-MSFT avatar image
0 Votes"
ColeXia-MSFT answered ·

@sphauck

Based on your sample , I made a simple test .

<StackLayout>
        <StackLayout BackgroundColor="Red" Orientation="Horizontal">

            <Image>
                <Image.Source>
                    <FontImageSource FontFamily="FA5Solid900" Color="Black" Glyph="{x:Static FA:FontAwesomeIcons.Ankh}"/>
                </Image.Source>
            </Image>

            <Image>
                <Image.Source>
                    <FontImageSource FontFamily="FA5Solid900" Color="Black" Glyph="{x:Static FA:FontAwesomeIcons.AppStore}"/>
                </Image.Source>
            </Image>

            <Image>
                <Image.Source>
                    <FontImageSource FontFamily="FA5Solid900" Color="Black" Glyph="&#xf004;"/>
                </Image.Source>
            </Image>

        </StackLayout>

        <StackLayout  Orientation="Horizontal">

            <Label  FontFamily="FA5Solid900"  Text ="{x:Static FA:FontAwesomeIcons.Ankh}"  FontSize="30"/>

            <Label  FontFamily="FA5Solid900"   Text ="{x:Static FA:FontAwesomeIcons.AppStore}"  FontSize="30"/>

            <Label  FontFamily="FA5Solid900"   Text ="&#xf004;"  FontSize="30"/>

        </StackLayout>
    </StackLayout>

75510-capture.png

I found

  • Not all the Unicode sting in FontAwesomeIcons works as expected. (`Acorn ,AppStore` not work but Ankh work)

  • The default color is light-gray not white, so we don't need to set color on it .

  • Unicode string or XML character escape does not work on ShellContent.Icon , it seems that it only supports existing image file .


capture.png (26.5 KiB)
· 5 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

my problem is with the font awesome Regular (Light) not the Solid


0 Votes 0 ·

I'm sure if there is some limitations on Awesome Free. You can raise the issue on github : https://github.com/FortAwesome/Font-Awesome/issues.

1 Vote 1 ·

but how can I set this condition in the AssemblyInfo.cs? Itried below but doesn't work:

 Device.RuntimePlatform == Device.iOS ? [assembly: ExportFont("FontAwesome5Brands-Regular.otf", Alias = "FontRegular")] : [assembly: ExportFont("FontAwesome5Brands-Regular.otf", Alias = "FontRegular")]


0 Votes 0 ·

No , We can't write logic into AssemblyInfo , Why you need to distinguish the file name on each platform ? The file locates in shared project , isn't it ?

0 Votes 0 ·

in your comment you stated ... "Unicode string or XML character escape does not work on ShellContent.Icon , it seems that it only supports existing image file ."

Why ?
Is there a converter I can use to use the font ?

0 Votes 0 ·