Search code examples
htmldjangopython-3.xbootstrap-4fontawesome-4.4.0

i am trying to add social media buttons on django template (html file), but bootstrap4 seems to be interfering with the social media icons

I am using bootstrap 4 to style my html pages. And i am using font awesome to add social media icons on the webpage too.

<!DOCTYPE html>
<html lang = 'en'>
<head>
    
    <meta charset = 'utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>
        Page Title
    </title>

    <style>
        body {background-color: lightcyan}
        
        .fa {
        padding: 20px;
        font-size: 30px;
        width: 30px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 50%;
        }

        .fa:hover {
        opacity: 0.6;
        }

        .fa-linkedin {
        background: #007bb5;
        color: white;
        }

        .fa-youtube {
        background: #bb0000;
        color: white;
        }
        
    </style>
</head>

<body>
    
    <div class = 'container'>
        <div class = 'row'>
            <div class = 'col text-center'>
                <a href="#" class="fa fa-linkedin fa-fw"></a>
                <a href="#" class="fa fa-youtube"></a>
            </div>
        </div>
    </div>

</body>
</html>

But when i import the bootstrap4 library, the social media icons shape distorts. 

<!DOCTYPE html>
<html lang = 'en'>
<head>
    
    <meta charset = 'utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>
        Action Page
    </title>

    <style>
        body {background-color: lightcyan}
        
        .fa {
        padding: 20px;
        font-size: 30px;
        width: 30px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 50%;
        }

        .fa:hover {
        opacity: 0.6;
        }

        .fa-linkedin {
        background: #007bb5;
        color: white;
        }

        .fa-youtube {
        background: #bb0000;
        color: white;
        }
        
    </style>

</head>

<body>
    
    <div class = 'container'>
        <div class = 'row'>
            <div class = 'col text-center'>
                <a href="#" class="fa fa-linkedin fa-fw"></a>
                <a href="#" class="fa fa-youtube"></a>
            </div>
        </div>
    </div>

</body>
</html>

I dont understand what the problem here is. Can somebody please help me solving this problem... Thanks in advance ! :)

Solution

  • If you use chrome inspect tools and play around with switching off css and changing the values for display or position etc.. You will see which rule is breaking it. I found changing these fixed it:

    .fa-linkedin, .fa-youtube {
  display: inline;
}

    (hint: in the dev tools it also tells you which css file is causing the changes, i think it was font-awesome here)