我正在尝试在 Django 模板（html 文件）上添加社交媒体按钮，但 bootstrap4 似乎干扰了社交媒体图标

Question

我正在使用 bootstrap 4 来设计我的 html 页面。我也在使用很棒的字体在网页上添加社交媒体图标。

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

但是当我导入 bootstrap4 库时，社交媒体图标的形状变形了。

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

我不明白这是什么问题。有人可以帮我解决这个问题吗... 提前致谢！ :)

Answer 1

如果您使用 chrome 检查工具并尝试关闭 css 并更改 display 或 position 等的值。您将看到哪个规则正在打破它。我发现更改这些修复了它：

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

（提示：在开发工具中，它还会告诉您哪个 css 文件导致了更改，我认为这里的字体很棒）

我正在尝试在 Django 模板（html 文件）上添加社交媒体按钮，但 bootstrap4 似乎干扰了社交媒体图标

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

html

django

python-3.x

bootstrap-4

fontawesome-4.4.0