Font Awesome with Bootstrap Social Icons 仅在正方形中显示各自的颜色而不是完整图标

Question

这是 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

Answer 1

class 的拼写是 calss 在你所有的 <i class> code.Please 更正它：

   
   <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>

Answer 2

使用 awesome 字体时会出现相同的常见错误。

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

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

Font Awesome with Bootstrap Social Icons 仅在正方形中显示各自的颜色而不是完整图标

Font Awesome with Bootstrap Social Icons only showing respective colours in squares instead of full icons

css

font-awesome

bootstrap-4