如果您运行以下 snipped ，您可以看到 'fa-enelope' 电子邮件 Logo 正在被复制。我以前从未使用过很棒的字体，我想知道我是否做错了什么。
当我加入 a 标签时，一切都变了——我想知道这是否与它有关。
我想知道我是否应该放弃很棒的字体并下载一些其他图标来使用。
body {
background-image: linear-gradient(to bottom right, #FFF, #bfbfbf);
height: 100vh;
font-family: 'Tajawal', sans-serif;
}
.title {
margin-top: 1rem;
text-align: center;
font-size: 9rem;
color: transparent;
background-image: linear-gradient(to bottom right, #f47a42, #f45041);
-webkit-background-clip: text;
}
.social-icons {
display: flex;
justify-content: center;
font-size: 2.5rem;
color: #f47a42;
}
.social-icons--camera {
margin-left: 10px;
margin-right: 10px;
color: #f47a42;
}
.social-icons--github {
color: #f47a42;
}
.social-icons--email {
color: #f47a42;
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>portfolio site</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="title">Adam Millington</h1>
<div class="social-icons">
<a href="mailto:someone@example.com">
<i class="social-icons--email far fa-envelope">
</a>
</i><a href="https://unsplash.com/@adammillingtonphotography" target="_blank"> <i class="social-icons--camera fas fa-camera-retro"></i></a>
<a href="https://github.com/malefis"> <i class="social-icons--github fab fa-github" target="_blank"></i></a>
</div>
<hr>
</body>
</html>最佳答案
您关闭了信封的 <i>在 </a> 之后
body {
background-image: linear-gradient(to bottom right, #FFF, #bfbfbf);
height: 100vh;
font-family: 'Tajawal', sans-serif;
}
.title {
margin-top: 1rem;
text-align: center;
font-size: 9rem;
color: transparent;
background-image: linear-gradient(to bottom right, #f47a42, #f45041);
-webkit-background-clip: text;
}
.social-icons {
display: flex;
justify-content: center;
font-size: 2.5rem;
color: #f47a42;
}
.social-icons--camera {
margin-left: 10px;
margin-right: 10px;
color: #f47a42;
}
.social-icons--github {
color: #f47a42;
}
.social-icons--email {
color: #f47a42;
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>portfolio site</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="title">Adam Millington</h1>
<div class="social-icons">
<a href="mailto:someone@example.com">
<i class="social-icons--email far fa-envelope"></i>
</a>
<a href="https://unsplash.com/@adammillingtonphotography" target="_blank"> <i class="social-icons--camera fas fa-camera-retro"></i></a>
<a href="https://github.com/malefis"> <i class="social-icons--github fab fa-github" target="_blank"></i></a>
</div>
<hr>
</body>
</html>关于html - 为什么我的 Font Awesome 图标被复制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50486042/