技术

Xamarin项目中使用Fontawesome

  使用Xamarin进行跨平台时,坑实在太多,这里记录一下。Xamarin项目中使用Fontawesome图标只是其中的一个小坑而已。

  要了解的事情:

  1.Fontawesome有两个版本。到目前为止,最新的版本是5.*,从版本5以后,Fontawesome把生成的ttf(或otf)文件分成了多个(如fa-regular-400.ttf,fa-solid-900.ttf等)。最后一个4.*的版本是4.7,4以下(包括4)的版本,所有的图标都是合成在一个字体文件中(如fontawesome-webfont.ttf)。

  2.使用Fontawesome图标时,如果在c#代码中使用,就使用”\uf0c9″这样的Cheatsheet码;如果在.xaml文件中使用,则使用”&#xf0c9″这样的转义字符。当然,也可以使用定义好的静态变量。

  3.使用Fontawesome图标时,一定要定义相关文本的FamilyName。否则,图标不会正常显示。版本4以下(包括4)的FamilyName统一都是”FontAwesome”(注意大小写);版本5以上(包括5)的FamilyName依据所引用的ttf(或otf)文件的不同而不同,一般形如” FontAwesome5Free-Solid “或” FontAwesome5Free-Regular”或” FontAwesome5Free-Brands”.

  4.如果搞不清楚所引用的ttf中所包含的FamilyName(特别是iOS版本上),可以使用代码把当前所有的FamilyName枚举出来,然后再在项目中使用。

  以下为具体的使用步骤:

  1.下载Fontawesome字体文件。

  版本5的下载地址:https://fontawesome.com/download [进入页面后下载 Free For Desktop 即可]

  版本4的下载地址:https://github.com/FortAwesome/Font-Awesome/releases/tag/v4.7.0 [进入页面后下载 Source code (zip) 即可]

  下载并解压后的效果:

  2.Xamarin项目中引用Fontawesome字体文件。

   2.1 Android项目中引用时,直接把字体文件拷贝入Assert文件夹下的自定义目录即可。拷贝完成后,注意文件的Build action属性应为AndroidAssert。效果如下:

   2.2 iOS项目中引用时,一是直接把字体文件拷贝到Resource目录下或Resource目录下的自定义目录内,要保证字体文件的属性一定得是BundleResource。效果如下:

   二是要修改iOS项目的Info.plist文件,添加Fonts provided by application配置荐及相关的字体文件地址。效果如下:

  3.Xamarin项目中使用FontAwesome图标。

   3.1 定义静态字符变量。

  3.2 页面中使用FontAwesome图标。

  4.最终效果:

注1:显示不正确(Android显示是一空白方格,iOS版本显示为方框内一个?号)的原因是版本4中没有 FAGripLines (即f7a4)这个图标。

注2:如果不确认引用的ttf(或otf)文件中所包含的FamilyName,iOS项目中可以使用以下代码枚举打印出来。

foreach (var familyNames in UIFont.FamilyNames.OrderBy(c => c).ToList())
{
    Console.WriteLine(" * " + familyNames);
    foreach (var familyName in UIFont.FontNamesForFamilyName(familyNames).OrderBy(c => c).ToList())
    {
        Console.WriteLine(" *-- " + familyName);
    }
}

相关参考:

1.FontAwesome5 Cheatsheet:https://fontawesome.com/cheatsheet

2.FontAwesome4.7 Cheatsheet:https://fontawesome.com/v4.7.0/cheatsheet

3.如何确定FamilyName:https://stackoverflow.com/questions/48188187/fontawesome-pro-and-xamarin-ios-only-one-font-can-be-active

4.如何在Xamarin项目中使用FontAwesome:https://medium.com/@tsjdevapps/use-fontawesome-in-a-xamarin-forms-app-2edf25311db4

One thought on “Xamarin项目中使用Fontawesome

发表评论

电子邮件地址不会被公开。 必填项已用*标注