Question

编辑：如果您使用的是 Font Awesome v。> = 5.8.0，则该问题无关紧要，因为它的维护者（经过长时间的讨论：）），同意应从svg文件中删除“标题”，并已在5.8.0版中完成：https://github.com/FortAwesome/Font-Awesome/issues/14595

现在，回到原始问题：

我按照官方的非常简单的教程：https://fontawesome.com/how-to-use/on-the-web/advanced/svg-sprites

尝试了其“ svg sprites”版本的Font Awesome（5）。

一切正常，除了将鼠标悬停在图像上（这很糟糕）时，我可以看到标题弹出。我的意思是当我们有<div title = "blah"></div>。

因此，根据文档（我猜），我已将“ sprites / regular.svg”文件复制到我的服务器上，并且：

<svg class = 'fa-svg-icon' title = 'my failed attempt to overwrite the title'>
    <use xlink:href="icons/font-awesome/sprites/solid.svg#user"></use>
</svg>

出于完整性考虑，“。fa-svg-icon”类：

.fa-svg-icon{
    width:1em;
    height:1em;
}

将鼠标悬停在图像上时，看到的是标题“用户”出现。这是因为这是svg文件中“我们的”片段中声明的内容：

<symbol id="user" viewBox="0 0 448 512">
    <title id="user-title">User</title>
    <path d="M224 256c70.7 0 ......"></path>
</symbol>

我尝试将svg元素和title = 'something'都添加<use>，但是没有任何效果

在FX和Chrome上都会发生这种情况。

编辑1 ：我创建了一个测试页：https://kpion.github.io/stuff/font-awesome-issue/

我敢肯定我在这里遗漏了一些明显的东西，因为显然我是这个世界上唯一有这个问题的人，或者google坏了。一个或另一个：）

编辑2 ：为了回答评论中的问题，这是我的开发工具-> chrome中的元素显示的内容（在“导入” svg符号之后）：

<svg class="fa-svg-icon" title="my -not-working-title for user">
    <use xlink:href="icons/font-awesome/sprites/solid.svg#user" title="blah - doesn't work either"></use>
    #shadow-root (closed)
    <svg id="user" viewBox="0 0 448 512" width="100%" height="100%">
        <title id="user-title">User</title>
        <path d="M224 256c70.7 0 128-57.3 128-..."></path>
    </svg>  
</svg>

不，它不会在悬停时发生变化，请记住，无论是我的字体还是字体，都不会涉及js。

Answer 1

我无法在自己的尝试中重新创建您的代码环境，但是您可以尝试以下CSS代码，仅在图标具有链接时获取指针事件：

.fa-svg-icon{
  pointer-events: none;
}

.fa-svg-icon a {
  pointer-events: auto;
}

如何摆脱鼠标悬停在字体真棒svg图标上的标题（使用svg精灵）

1 个答案: