我正在尝试在 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
我正在使用 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>
我不明白这是什么问题。
有人可以帮我解决这个问题吗...
提前致谢 ! :)
如果您使用 chrome 检查工具并尝试关闭 css 并更改 display
或 position
等的值。您将看到哪个规则正在打破它。我发现更改这些修复了它:
.fa-linkedin, .fa-youtube {
display: inline;
}
(提示:在开发工具中,它还会告诉您哪个 css 文件导致了更改,我认为这里的字体很棒)
我正在使用 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>
我不明白这是什么问题。 有人可以帮我解决这个问题吗... 提前致谢 ! :)
如果您使用 chrome 检查工具并尝试关闭 css 并更改 display
或 position
等的值。您将看到哪个规则正在打破它。我发现更改这些修复了它:
.fa-linkedin, .fa-youtube {
display: inline;
}
(提示:在开发工具中,它还会告诉您哪个 css 文件导致了更改,我认为这里的字体很棒)