SVG 图标不能正确显示

Question

.footer-wrapper{
font-family: 'Poppins', sans-serif;
display: flex;
padding: 2rem;
width: 90%;
margin: auto;
align-items: center;
min-height: 10vh;
}

<div class="footer-wrapper">
  <ul>
      <li><a href="#"><img src="/icons/instagram(3).svg" alt=""></a></li>
      <li><a href="#"><img src="/icons/twitter(2).svg" alt=""><</a></li>
      <li><a href="#"><img src="/icons/linkedin(1).svg" alt=""></a></li>
  </ul>
</div>

我将上面的代码用于 footer.But 中的社交媒体图标我不知道为什么图标不能正确显示它就像其中一个出现而其他人不出现并且还显示类似的奇怪字符不到 sign.Can 谁能帮我解决这个问题？

Answer 1

如果能拍张照就更好了。您的第 3 行有一个额外的“<”符号，这就是它出现的原因

<div class="footer-wrapper">
  <ul>
  <li><a href="#"><img src="/icons/instagram(3).svg" alt=""></a></li>
  <li><a href="#"><img src="/icons/twitter(2).svg" alt=""></a></li>
  <li><a href="#"><img src="/icons/linkedin(1).svg" alt=""></a></li>
  </ul>
</div>

Answer 2

1.Using svg 图标作为标签是完全错误的使用图标生成器，例如 GRUNT 编译器或网站，例如 Icomoon，然后将它们放入标签中。！ 2.img src="/icons/twitter(2).svg" alt="">< 你的代码中有额外的 <。 3.use font-size 也许可以。！ 4.be 确定 src 是正确的。 5.add 宽度：100% 而不是 90%，高度 100%

SVG 图标不能正确显示

SVG icons dont show up correctly

html

css

icons

svg

image