Html 如何在angular/ionic应用程序中显示表情符号

在我使用angular5/ionic3应用程序的移动应用程序中，我想显示表情符号图标

所以我用了

😁

但在渲染时，它将显示为空正方形

我的
index.html中已经有
，html文件也保存为utf-8

我认为这可能与消毒有关，所以我在管道下面创建了一个

@Pipe({
  name: 'safeHtml',
})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private domSanitizer: DomSanitizer) { }
    transform(html) {
    return this.domSanitizer.bypassSecurityTrustHtml(html);
    }
}

然后我就把它当作

 <span [innerHTML]="'&#x1F601;' | safeHtml"></span>   



但结果还是一样的

我错过了什么



当您没有字体显示字符时，通常会发生这种情况。在我的电脑上，Chrome使用Symbola字体来呈现这个角色。你可以从下载。或者你可以找到另一种支持表情符号的字体。然后使用CSS添加字体

@font-face{
字体系列：“符号”；
src:url（“/font/Symbola Emoji.woff”）格式（“woff”），
url（“/fonts/Symbola Emoji.ttf”）格式（“ttf”）；
}

然后您可以在CSS
类上使用此字体

.emoji{
字体系列：“符号”
}

然后将该类添加到
span
：

<span class="emoji">&#x1F601;</span>

但是您的代码中断：
U+1F601
字符（又称
我不确定它是否与字体有关，我创建了一个带有相同标记的简单html文件并正确呈现，你仍然建议尝试使用字体吗？我创建了一个带有相同标记的简单html文件并正确呈现-嗯…你仍然建议尝试使用字体吗？-很好，这不会有什么伤害：）有没有什么特别的原因让你在表情符号中使用HTML代码，而不仅仅是把
放在一个好的地方，我只是复制粘贴它，它就可以工作了，我怎么能复制粘贴其他的呢？
<span [innerHTML]="someVariable | safeHtml"></span><!--this will work-->