为什么我看不到Angular mat-icon-button中的图标图片？

Question

我在Angular项目中找到了这部分代码，我也想将其添加到程序中：

<div style="text-align:center">
  <a mat-icon-button class="btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus fa-lg"></i></a>
  <a mat-icon-button class="btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook fa-lg"></i></a>
  <a mat-icon-button class="btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin fa-lg"></i></a>
  <a mat-icon-button class="btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter fa-lg"></i></a>
  <a mat-icon-button class="btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube fa-lg"></i></a>
  <a mat-icon-button class="btn-mail" href="mailto:"><i class="fa fa-envelope-o fa-lg"></i></a>
</div>

但是问题是我看不到其中每个图标的图片（符号），并且在我的应用程序中显示没有图片的图标！有什么问题，我该如何解决？

Answer 1

您在代码中使用了Font Awesome图标，因此您需要在角度设置中添加库。请参阅this链接，了解如何在设置中使用Font Awesome库。

否则，您可以只在index.html中调用外部样式表，那么它也可以正常工作。请参考外部样式表URL。

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

希望这会有所帮助！谢谢。

Answer 2

这部分代码<i class="fa fa-linkedin fa-lg"></I>通知您要显示Awsome字体中的图标

[如果要这样做，您应该添加将这种字体导入到您的应用中，例如：index.html。<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

有关如何使用此字体的更多信息，您会发现hire