我在一个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>但问题是，我看不到里面每个图标的图片（符号），它在我的应用程序中显示没有图片的图标！问题是什么，我如何修复它？
3条答案
按热度按时间7d7tgy0s1#
您在代码中使用了Font Awesome图标，因此需要在Angular 设置中添加该库。请参阅this链接，了解如何在设置中使用Font Awesome库。
或者你也可以在index.html中调用外部样式表，这样它也能正常工作。请参考外部样式表的URL。
希望这对你有帮助！谢谢。
hmmo2u0o2#
这部分代码
<i class="fa fa-linkedin fa-lg"></I>通知您要显示来自Awesome Font的图标如果你想这样做，你应该在你的应用程序中添加导入此字体，例如：
index.html.<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">关于如何使用此字体的更多信息，您将找到here
ecbunoof3#
2022年在Coursera上学习Angular课程时，我也遇到了同样的问题。问题中的代码与课程中的代码完全相同，所以我假设OP在那门课程中也遇到了同样的问题。
以下是针对本课程开发的conFusion网站中此问题的解决方案：
在
src/_variables.scss中，我通过设置而不是所指示的
../node_modules/font-awesome/fonts。在Angular 项目的
styles.scss中进行此导入时：$fa-font-path变量被解释为相对于Font Awesome scss文件所在的位置（即实际使用该变量的位置），而不是相对于styles.scss文件本身所在的位置。我正在用Angular 14.2来做这门课。我认为老师的指示是有效的，就像他在2018年左右录制这门课一样，但从那时起，SCSS的情况发生了变化。