为什么我在 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

这部分代码 <i class="fa fa-linkedin fa-lg"></I> 告知您要显示来自 Awsome Font

的图标

如果你想这样做，你应该在你的应用程序中添加导入此字体，例如：index.html。 <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

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

Answer 2

您在代码中使用了 Font Awesome 图标，因此您需要在 angular 设置中添加该库。请参阅 this link 了解如何在您的设置中使用 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" />

希望对您有所帮助！谢谢。

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

Why I can not see the icon pics in Angular mat-icon-button?

html

icons

button

angular-material2

angular