Why does an SVG element disappear after changing the fill color?

N

Norum2020-10-11 01:03:05

css

Norum, 2020-10-11 01:03:05

I want to change the fill color of an element to another. I change it in Photoshop, but after the update the icon disappears, it just disappears

https://yadi.sk/i/MLPMk4bQZJ3jHg

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width"/>
     <link rel="shortcut icon" href="img/favicon.png" type="image/png">
      <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/adaptive.css">
     <link rel="stylesheet" href="css/clear.css">
     <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
     <script src="https://kit.fontawesome.com/a34934a34a.js" crossorigin="anonymous"></script>
     <script src="js/script.js"></script>
    
    <title>Site</title>
  </head>
<body>
  <div class="header block">
    <div class="wrapper">
      <a class="logo" href="index.html"><img src="" alt="logo"></a>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur iure ad, magnam aspernatur impedit porro cupiditate laudantium perferendis ab dolor tempora incidunt. Omnis error perferendis enim iusto deserunt hic, dolor, dicta porro nostrum. Quasi unde, minima sint consequuntur neque, atque.
      
      
      <div class="icons">

        <a href="#"><img src="img/icons/telegram.svg" alt=""></a>
        <a href="#"><img src="img/icons/vk.svg" alt=""></a>
        <a href="#"><img src="img/icons/instagram.svg" alt=""></a>
        <a href="#"><img src="img/icons/facebook.svg" alt=""></a>
        <a href="#"><img src="img/icons/whatsapp.svg" alt=""></a>
      </div>
      
    </div>	
  </div>
    
    
      
</body>
</html>

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  line-height: 1.5;
}

.wrapper {
  max-width: 1400px;
  margin: 0 auto 0 auto;
  padding: 0 30px;
}
  
.block {
  margin-bottom: 70px;
}

.header {
  background-color:#100831;

  .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  
}

.logo img {
  height: 180px;
  margin-bottom: -6px;
}

a {
  &.tel {

    font-size: 33px;
    line-height: 32px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #ffffff;
  }
}


.icons {
  background-color: #FFF;
  width: 100%;
  img {
    width: 25px;
  }
    
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

Steppp, 2020-10-11
@Norum

All icons from artage.io
snippet