代码之家 › 专栏 › 技术社区 › phil soady

Xamarin forms UWP中的FontAwesome

xamarin.uwp font-awesome xamarin.forms

3

phil soady · 技术社区 · 7 年前

我有一个在Android中使用Fontawesome的自定义渲染器。我在遵循这个指南 using font awesome in UWP 使用自定义标签类型,尝试让Fontawesome在UWP中工作。

public class FontAwesomeLabel: Xamarin.Forms.Label    {
    public FontAwesomeLabel()        {
        switch (Device.RuntimePlatform)
      {
           case Device.UWP:
                FontFamily = @"/Assets/FontAwesome.otf#FontAwesome";
                break;
        }
    }
}

字体

作为ttf和otf加载。我两种都试过了。他们认为字体具有构建操作“内容”

mainView.Children.Add( new FontAwesomeLabel()
      {Text = FaConstPool.FASearch ,FontSize = 40});

public static string FASearch = "\uf002";

仅适用于Android,不适用于UWP

我看到一个奇怪的框,而不是预期的Fontawesome图标。

你知道我做错了什么吗?

2 回复 | 直到 7 年前

1

4

phil soady 7 年前

问题的解决方案是使用UWP,使用正确的字体系列名称。 Font Awesome 5免费纯色 不仅仅是“FontAwesome”

 // FontFamily = @"/Assets/FontAwesome.otf#FontAwesome"; // incorrect font family name
    FontFamily = @"/Assets/Fonts/FontAwesome.otf#Font Awesome 5 Free Solid";

对于任何对细节感兴趣的人:
我下载了一个字体编辑器来检查内部字体名称和字体系列名称。我犯了一个错误,即代码复制了使用类似/旧字体值的博客帖子。有关实际内容,请参见图片。

我有两种解决方案:
1) 共享代码/中的自定义控件。netStandard公共项目。
2) 自定义渲染器

解决方案1:自定义标签

public class FontAwesomeLabel: Xamarin.Forms.Label
{
    public FontAwesomeLabel()
    {
        switch (Device.RuntimePlatform)
        {
           case Device.UWP:
             // make sure the correct font family name is used. Check in a font editor
               this.FontFamily = @"/Assets/Fonts/FontAwesome.otf#Font Awesome 5 Free Solid";
                break;
        }
    }
}

解决方案2:标准控件上的客户渲染器

[assembly: ExportRenderer(typeof(Label), typeof(FontAwesomeLabelRenderer))]
namespace Oxando.UWP.CustomRenderers
{
public class FontAwesomeLabelRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);
        if (Control != null)
        {
            // on UWP be sure use the Font Family name.
            // get a font editor and check the name, if it doesnt match UWP wont load it
            if (FontAwesomeUtil.CheckIsFA(e.NewElement.Text))
            {
                Control.FontFamily = new FontFamily("/Assets/Fonts/FontAwesome.otf#Font Awesome 5 Free Solid");
            }
        }
    }
}
internal static class FontAwesomeUtil
{
    public static bool CheckIsFA(string text)
    {
        if (text.Length == 0) return false;
        if (text.Length > 1 || text[0] < 0xf000) return false;
        return true;
    }
}

}

实际内部名称,如字体编辑器中所示

2

Wilson Vargas MaticDiba 7 年前

在UWP上添加字体的正确路径是 /Assets/Fonts/FontAwesome.ttf#FontAwesome 似乎您必须添加 Fonts 文件夹

这样地:

此外,您还可以使用 Iconize plugin 并检查以下答案:

How can I display a font awesome glyph in XAML/C#