Twitter Bootstrap Question posted in

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

This is the 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>

Here is the code:

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

Here is how it looks like:
Check the footer of the page bottom right

Tags:

2

Answers


  1. 0

    The spelling of class is calss in all your <i class> code.Please correct it:

       
   <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>
    Login or Signup to reply.
  2. 0

    There are same usual errors when working with font awesome.

    You should provide same more info regarding the problem you’re having, like the content of your style.css file, because you could be overriding the font-family property.

    Apart from that, how is you’re project structure? be aware that font-awesome.min.css will need to have also a folder containing the file ‘Fonts/fontawesome-webfont.ttf’ for running correctly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search