分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了将 SVG 精灵用于社交媒体图标。图标的名称不会显示在像 lynx 这样的基于文本的浏览器中？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决将 SVG 精灵用于社交媒体图标。图标的名称不会显示在像 lynx 这样的基于文本的浏览器中？？

开发过程中遇到将 SVG 精灵用于社交媒体图标。图标的名称不会显示在像 lynx 这样的基于文本的浏览器中？的问题如何解决？下面主要结合日常开发的经验，给出你关于将 SVG 精灵用于社交媒体图标。图标的名称不会显示在像 lynx 这样的基于文本的浏览器中？的解决方法建议，希望对你解决将 SVG 精灵用于社交媒体图标。图标的名称不会显示在像 lynx 这样的基于文本的浏览器中？有所启发或帮助；

我正在使用这种 SVG 方法（我不确定这是否是正确的方法）在页面上插入社交媒体图标。但是，当我在基于文本的浏览器中打开页面时，名称“Facebook”没有出现。但是，正如您所看到的，我在 SVG 定义中有一个 title 标记。如果它没有出现在基于文本的浏览器中，那么什么时候使用。

:root {
  Box-sizing: border-Box;
}

*,*::before,*::after {
  Box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.social {
  margin: 0;
  padding: 0;
  List-style: none;
}

.icon {
  max-wIDth: 18px;
}

<!DOCTYPE HTML>
<HTML lang="en-US">
<head>
  <Meta charset="UTF-8">
  <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0">
  <link rel="stylesheet" href="social-svg.CSS">
  <title>Social Icons with SVGs</title>
</head>
<body>
  <ul class="social">
    <li>
      <a href="#" target="_blank" rel="noopener" aria-label="Facebook">
        <svg class="icon icon-facebook">
          <use xlink:href="#icon-facebook" href="#icon-facebook"></use>
        </svg>
      </a>
    </li>
  </ul>

  <svg xmlns="http://www.w3.org/2000/svg" wIDth="0" height="0">
    <defs>
      <symbol ID="icon-facebook" vIEwBox="0 0 24 24">
        <title>Facebook</title>
        <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/>
      </symbol>
    </defs>
  </svg>
</body>
</HTML>