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";
        }
    }

更新：

答案是我们必须使用此FontFamily=@"/Assets/Fonts/FontAwesome.ttf#FontAwesome"

Answer 1

然而，当我用ContnetPage替换NavigationPage时，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";
        }
    }

我用ContnetPage替换NavigationPage。它运作得很好。

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

1 个答案: