为什么字形图标不能用作锚点？答案

【问题标题】：Why don't glyphicons work as anchors?为什么字形图标不能用作锚点？
【发布时间】：2015-03-09 08:50:41
【问题描述】：

我的公司的大型项目遇到问题。在我的程序页面上，我有标准的锚标记。如果您将鼠标悬停在它们上方，我将它们设置为打开一个新窗口并弹出一个缩略图。效果很好。但是，我尝试在锚触发器工作后立即添加一个字形图标来处理弹出功能，但没有成功。这是html的工作sn-p-

<a href="images/Nibrotom/IMG_0200.jpg" target="_blank">cover </a>

现在添加一个字形...看起来还不错

<a href="images/Nibrotom/IMG_0200.jpg" target="_blank">cover </a><span class="glyphicon glyphicon-search"></span>

现在将字形包装在我的弹出代码中（我用 CSS 来做）并且它坏了。

<a href="images/Nibrotom/IMG_0200.jpg" target="_blank">cover </a>
<a href="#" class="thumb" onClick="return false;"><span class="glyphicon glyphicon-search"><img src="images/Nibrotom/IMG_0200.jpg"></span></a>

关于为什么这不起作用的任何想法？谢谢

【问题讨论】：

标签： twitter-bootstrap glyphicons

【解决方案1】：

包裹 glyphicon 的 span 也包裹了您的图像。

从此更改您的锚标记：

<a href="images/Nibrotom/IMG_0200.jpg" target="_blank">
    cover
</a>
<a href="#" class="thumb" onClick="return false;">
    <span class="glyphicon glyphicon-search"><img src="images/Nibrotom/IMG_0200.jpg">
    </span>
</a>

到这里：

<a href="images/Nibrotom/IMG_0200.jpg" target="_blank">
    cover
</a>
<a href="#" class="thumb" onClick="return false;">
    <span class="glyphicon glyphicon-search"></span> <img src="images/Nibrotom/IMG_0200.jpg">
</a>

【讨论】：

您所做的更改超出了代码块的视口？您能否缩进您的代码，使其更易于阅读，并添加解释其工作原理的说明？
已经尝试过这种方式@Andrew。如果我复制并粘贴您的代码，则会在段落中显示缩略图。要隐藏它，直到我将 IMG 链接悬停在“span”元素中，这是来自同一页面的工作代码来说明我在说什么：给我五
抱歉，我试图让我的代码正确显示，但我遇到了 5 分钟的编辑评论限制。老实说，我认为这是 Bootstrap 代码中的一个小故障。一旦你把任何东西放在字形的跨度标签中，它就会破坏它。哎呀，我什至尝试在锚内的字形跨度标签之后放置另一个跨度标签，但这也不起作用。对于这样的事情，我将不得不使用 JQuery 并重新编写代码。