如何在NavigationPages UWP Xamarin.Forms中使用FontAwesome图标？

Question

我在ContentPage中使用FontAwesome，在Android和UWP中没有任何问题。 （Android使用标签渲染类）。 但是，当我用ContnetPage替换NavigationPage时，UWP字体图标消失并向我显示一个正方形！ Android与NavigationPage正常工作。 UWP是否需要像Android一样渲染？

public class FontAwesomeIcon : Label 
    { 
     public const string Typeface = "FontAwesome"; 
     public FontAwesomeIcon(string fontAwesomeIcon = null) 
     { 
      switch (Device.RuntimePlatform) 
      { 
       case Device.Windows : 
       { 
        FontFamily= "Assets/Fonts/FontAwesome.ttf#FontAwesome"; 
        break; 
       } 
       case Device.Android : 
       { 
        FontFamily = Typeface; 
        break; 
       } 
       case Device.iOS: 
       { 
        FontFamily = Typeface; 
        break; 
       } 
      } 
      Text = fontAwesomeIcon; 
      VerticalOptions = LayoutOptions.Center; 
     } 

     /// <summary> 
     /// Get more icons from http://fortawesome.github.io/Font-Awesome/cheatsheet/ 
     /// Tip: Just copy and past the icon picture here to get the icon 
     /// </summary> 
     public static class Icon 
     { 
      public static string AngleRight = "\uf105"; 
      public static string User = "\uf007"; 
      public static string Lock = "\uf023"; 
     } 
    } 

更新：

答案是，我们必须在我与ContnetPage取代NavigationPage使用[email protected]"/Assets/Fonts/FontAwesome.ttf#FontAwesome"

Answer 1

然而，UWP字体图标消失，显示我的平方值！ Android与NavigationPage正常工作。 UWP是否需要像Android一样渲染？

在uwp客户端项目中有两种使用自定义字体的方法。

创造FontAwesomeIcon类的定制渲染器。然后为本地控制设置FontFamily。请参考下面的代码。请注意，您需要检查FontFamily的路径。

[assembly: ExportRenderer(typeof(CustomLabel), typeof(CustomLabelRenderer))] 

namespace FontAweSomeTest.UWP 
{ 
    public class CustomLabelRenderer : LabelRenderer 
    { 
     protected override void OnElementChanged(ElementChangedEventArgs<Label> e) 
     { 
      base.OnElementChanged(e); 
      var label = Control; 
      string font = "Assets/Fonts/fontawesom-webfont.ttf#FontAwesome"; 
      label.FontFamily = new Windows.UI.Xaml.Media.FontFamily(font); 
     } 
    } 
} 

另一种方式是你在你的文章中提到。我修改了你的代码。请检查。

public class FontAwesomeIcon : Label 
    { 
     public const string Typeface = "FontAwesome"; 

     public FontAwesomeIcon(string fontAwesomeIcon = null) 
     { 
      switch (Device.OS) 
      { 
       case TargetPlatform.Windows: 
        { 
         FontFamily = "Assets/Fonts/fontawesome-webfont.ttf#FontAwesome"; 
         break; 
        } 
       case TargetPlatform.Android: 
        { 
         FontFamily = Typeface; 
         break; 
        } 
       case TargetPlatform.iOS: 
        { 
         FontFamily = Typeface; 
         break; 
        } 
      } 
      Text = fontAwesomeIcon; 
      VerticalOptions = LayoutOptions.Center; 
      HorizontalOptions = LayoutOptions.Center; 
     } 

     /// <summary> 
     /// Get more icons from http://fortawesome.github.io/Font-Awesome/cheatsheet/ 
     /// Tip: Just copy and past the icon picture here to get the icon 
     /// </summary> 
     public static class Icon 
     { 
      public static string AngleRight = "\uf105"; 
      public static string User = "\uf007"; 
      public static string Lock = "\uf023"; 
     } 
    } 

我将NavigationPage替换为ContnetPage。它工作得很好。