带有 Bootstrap 社交图标的 Font Awesome 仅在正方形中显示相应的颜色，而不是完整图标答案

【问题标题】：Font Awesome with Bootstrap Social Icons only showing respective colours in squares instead of full icons带有 Bootstrap 社交图标的 Font Awesome 仅在正方形中显示相应的颜色，而不是完整图标
【发布时间】：2020-10-04 14:27:45
【问题描述】：

这是 CSS：

<head>
 <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel = "stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
    <link rel = "stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">

    <link rel="stylesheet" href="css/styles.css">
    <title>Ristorante Con Fusion</title>
</head>

代码如下：

                        <a class="btn btn-social-icon btn-google" href="http://google.com/+"><i calss="fa fa-google-plus fa-lg "></i></a>
                        <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i calss="fa fa-facebook fa-lg"></i></a>
                        <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i calss="fa fa-linkedin fa-lg"></i></a>
                        <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i calss="fa fa-twitter fa-lg"></i></a>
                        <a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i calss="fa fa-youtube fa-lg"></i></a>
                        <a class="btn btn-social-icon" href="mailto:"<i calss="fa fa-envelope fa-lg"></i></a>
                    </div>

下面是它的样子： Check the footer of the page bottom right

【问题讨论】：

标签： css bootstrap-4 font-awesome

【解决方案1】：

class 的拼写在您的所有<i class> 代码中都是calss。请更正：

   
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   
   
   <i class="fa fa-google-plus fa-lg "></i>
   <i class="fa fa-facebook fa-lg"></i>
   <i class="fa fa-linkedin fa-lg"></i>
   <i class="fa fa-twitter fa-lg"></i>
   <i class="fa fa-youtube fa-lg"></i>
   <i class="fa fa-envelope fa-lg"></i>

【讨论】：

非常欢迎:)。如果你喜欢它，请接受这个答案。

【解决方案2】：

使用 font awesome 时也会出现同样常见的错误。

您应该提供有关您遇到的问题的更多信息，例如 style.css 文件的内容，因为您可能会覆盖 font-family 属性。

除此之外，您的项目结构如何？请注意，font-awesome.min.css 还需要一个包含“Fonts/fontawesome-webfont.ttf”文件的文件夹才能正常运行。

【讨论】：

这只是一个错字，我错误地写了“calss”而不是“class”。非常感谢！