Почему мой шрифт удивительный значок дублируется - PullRequest
Новая
       11

Почему мой шрифт удивительный значок дублируется

0 голосов
/ 23 мая 2018

Если вы запустите приведенный ниже фрагмент, вы увидите, что логотип 'fa-enelope'email дублируется.Я никогда раньше не использовал шрифт awesome, и мне интересно, сделал ли я что-то не так.

Все изменилось, когда я включил тег - интересно, это как-то связано с ним.

Мне интересно, стоит ли мне просто удалить шрифт и загрузить другие значки для использования. 

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>

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Вы закрыли свой тег 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;
}
<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>
0 голосов
/ 23 мая 2018

Вы закрыли конверт <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>
...