я пытаюсь добавить кнопки социальных сетей в шаблон django (файл html), но bootstrap4, кажется, мешает значкам социальных сетей - PullRequest
Новая
       47

я пытаюсь добавить кнопки социальных сетей в шаблон django (файл html), но bootstrap4, кажется, мешает значкам социальных сетей

1 голос
/ 08 февраля 2020

Я использую 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>

Я не понимаю, в чем здесь проблема. Может кто-нибудь, пожалуйста, помогите мне решить эту проблему ... Заранее спасибо! :)

1 Ответ

0 голосов
/ 08 февраля 2020

Если вы используете chrome, осмотрите инструменты и поиграйте с выключением css и изменением значений для display или position et c .. Вы увидите, какое правило нарушает его. Я обнаружил, что изменение это исправило: 

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

(подсказка: в инструментах разработчика он также сообщает вам, какой файл css вызывает изменения, я думаю, что он был просто потрясающим)

...