Angular中的字体真棒图标不正确答案

【问题标题】：font awesome icon incorrect in AngularAngular中的字体真棒图标不正确
【发布时间】：2021-03-17 22:39:04
【问题描述】：

我正在尝试在 My Angular 项目中使用字体真棒图标。

为此，我在 Index.html 的头部添加了以下代码

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

在我的 HTML 中，我使用以下代码：

<i class="fas fa-bars"></i>

我期待带有 3 个水平条的汉堡包 ICON。

但 Get 是一个矩形框

这是我使用 Bootstrap 完成的完整 HTML 代码

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>

这是我的 Index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Frontend</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-CuOF+2SnTUfTwSZjCXf01h7uYhfOBuxIhGKPbfEJ3+FqH/s6cIFN9bGr1HmAg4fQ" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
    <app-root></app-root>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.min.js"
        integrity="sha384-t6I8D5dJmMXjCsRLhSzCltuhNZg6P10kE0m0nAncLUjH6GeYLhRU1zfLoW3QNQDF"
        crossorigin="anonymous"></script>
</body>

</html>

【问题讨论】：

如果你这样做<i class="fa fa-bars"></i>而不是<i class="fas fa-bars"></i>，你会得到更好的结果吗？
确保将 i 元素放在按钮元素之外。如果可行，请检查您的样式并确保您没有覆盖按钮元素内 i 元素的字体系列。
我用过 "" 。它还显示矩形框。
我也尝试在按钮之外使用它。结果相同

标签： angular icons font-awesome

【解决方案1】：

Font Awesome 需要 fa 而不是 fas 类。如果您下载链接的样式表https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

，您会注意到这一点

这应该可行：

<i class="fa fa-bars"></i>

【讨论】：