如何在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使用FontFamily=@"/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。它工作得很好。