嗨，大家好。当我向我的Jekyll网站添加一个maxcdn bootstrap 4时，它会破坏我的字体真棒（我的header.html中的div内的那个） 这是由我添加的maxcdn字体提供的真棒。任何人都可以帮忙吗？附件是我的head.html（链接到maxcdn bootstrap 4注释掉），header.html，main.css和两个不同场景的截图（screenshot1，screenshot2）我觉得它的样式icons-header div（包含header.html中的图标）是罪魁祸首。在main.css的中间提到了icons-header。干杯球员
//head.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="//cdn.rawgit.com/konpa/devicon/master/devicon.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css"/>
<link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
</head>
//header.html
<div id="particles-js">
<div class="content">
<h1>
<span class="site-title">{{site.username}}</span>
<span class="site-description">{{site.user_title}}</span>
</h1>
<div class="icons-header">
<a aria-label="Send email" href="mailto:{{site.email}}"><i class="icon fa fa-envelope"></i></a>
<a aria-label="My LinkedIn" target="_blank" href="https://linkedin.com/in/{{site.linkedin_username}}"><i class="icon fa fa-linkedin-square" aria-hidden="true"></i></a>
<a aria-label="My Github" target="_blank" href="https://github.com/{{site.github_username}}"><i class="icon fa fa-github" aria-hidden="true"></i></a>
</div>
<a class="link" href="#about" data-scroll>About Me</a>
<a class="link" href="#projects" data-scroll>Projects</a>
</div>
<a class="down" href="#about" data-scroll><i class="icon fa fa-chevron-down" aria-hidden="true"></i></a>
</div>
//main.css. I think the culprit is the icons-header div
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body
{font-family:'Montserrat',sans-serif}
@-webkit-keyframes pulse{0%,to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);opacity:.4;top:0}50%{-ms-filter:none;-webkit-filter:none;filter:none;opacity:1;top:-10px}}
@keyframes pulse{0%,to{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);opacity:.4;top:0}50%{-ms-filter:none;-webkit-filter:none;filter:none;opacity:1;top:-10px}}
#particles-js{
background:#1a222c;
display:block;
vertical-align:bottom;
width:100vw;
min-height:100vh;
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed
}
#particles-js .particles-js-canvas-el{
width:100vw!important;height:100vh!important
}
.content{
z-index:1;
text-align:center;
color:#fff;
position:absolute;
top:50%;
left:50%;
margin:0 auto;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%)
}
.content .site-title{
font-size:50px;
display:block;
line-height:1
}
@media only screen and (min-width:768px)
{
.content .site-title{
margin:0;
font-size:100px
}
}
.content .site-description{
font-size:20px;
display:block;
line-height:1;
margin:5px 0 10px
}
@media only screen and (min-width:768px){
.content .site-description{
font-size:40px
}
}
.content .link{
color:#fff;
display:inline-flex;
justify-content:space-between;
text-decoration:none;
font-size:15px;
margin:10px
}
@media only screen and (min-width:768px){
.content .link{
font-size:20px
}
}
.icons-header{
display:flex;
justify-content:center
}
.icons-header .icon{
text-align:center;
color:#fff;
width:20px;
height:20px;
font-size:20px;
padding:10px;
margin:2px;
border-radius:50%;
border:2px solid #fff;
transition:all .7s
}
.icons-header .icon:active,.icons-header .icon:hover{
color:#1a222c;background:#fff
}
@media only screen and (min-width:768px){
.icons-header .icon{
width:35px;
height:35px;
font-size:35px
}
}
.down,.icons-header,.user{
text-align:center
}
.down{
color:#fff;
position:absolute;
bottom:25px;
width:100%;
display:block;
cursor:pointer;
margin:0 auto;
font-size:30px
}
.down .icon{
position:absolute;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
width:100px;
height:100px;
fill:#fff;
-webkit-animation:pulse 1.3s infinite;
animation:pulse 1.3s infinite
}
.down .icon:active,.down .icon:hover,.footer a:active,.footer a:hover{
color:#4b5664
}
.user{
margin:20px auto;font-size:60px
}
.user p{
font-size:16px
}
@media only screen and (min-width:768px){
.user{
font-size:75px
}
}
.user-details{
text-align:center;
font-size:16px;
margin:10px auto
}
.user-projects{
margin:40px auto
}
.user-projects img{
max-width:100%;
height:auto;
border-radius:5px
}
.user-projects h5,body{
margin:0
}
.user-projects li{
color:#1a222c;
font-size:1.1rem
}
.user-projects p{
margin-right:5px
}
@media only screen and (min-width:768px){
.images,.images img{
float:right
}
.contents{margin-left:0
}
}
.project-link{
display:block;
width:100px;
margin:10px 0;
padding:5px;
color:#1a222c;
background-color:transparent;
border:1px solid #1a222c;
border-radius:10px;
text-align:center;
outline:none;
text-decoration:none;
cursor:pointer;
transition:color .3s ease-out,background-color .3s ease-out,border-color .3s ease-out
}
.project-link:active,.project-link:hover{
background-color:#54516a;
border-color:#54516a;
color:#fff;
transition:color .3s ease-in,background-color .3s ease-in,border-color .3s ease-in
}
.footer{
background:#1a222c;
padding:10px 0;
margin-top:100px;
text-align:center;
color:#fff
}
.footer .love{
color:red
}
.footer a{
text-decoration:none;margin:0;color:#fff
}