如何禁用 Bootstrap glyphicons 的可点击属性？答案

【问题标题】：How to disable the clickable property for Bootstrap glyphicons?如何禁用 Bootstrap glyphicons 的可点击属性？
【发布时间】：2016-05-04 12:33:00
【问题描述】：

我在我的网站上包含了 Bootstrap-3 字形图标：

<a class="glyphicon glyphicon-wrench"></a>

我自愿省略了href 属性，因为我不需要 clickable 属性（这些图标仅用于装饰）。

图标保持可点击状态：当鼠标移到图标上时颜色会发生变化，同时出现下划线，给人一种可以点击它们来实现某些目标的错觉......

有没有办法禁用这种行为？

【问题讨论】：

不要使用a 元素，而是使用不同的元素，例如i ...?

标签： html css twitter-bootstrap twitter-bootstrap-3 glyphicons

【解决方案1】：

.avoid-clicks {
  pointer-events: none;
}

   

<a class="avoid-clicks">try selecting text through me</a>

使用指针事件：没有看到这个例子

【讨论】：

【解决方案2】：

不要使用a，而是使用span 或i 之类的东西。以您喜欢的方式为span 设置样式。

HTML：

<span class="glyphicon glyphicon-wrench"></span>

a 中的 HTML 图标：

<a href="#"><span class="glyphicon glyphicon-wrench"></span> Link with icon</a>

CSS：

a span { your style }

【讨论】：

谢谢@djl！显然，我必须避免使用专门为链接制作的 <a></a> 标签……这绝对是我需要做的最简单的方法。

【解决方案3】：

添加这个 CSS

.glyphicon {
    color: #000 !important;
}
.glyphicon:hover {
    text-decoration: none;
    color:  /* Set your colour if you do not want to use "!important" */;
    cursor: default;
}

您可以使用!important 设置颜色，将特异性提高到100，或者只给:hover 提供相同的颜色。我建议后者保持低特异性。

【讨论】：

您的回答会重置鼠标光标。 OP想要删除点击。他正在使用 a 标签。他只需要切换到跨度。（或任何其他类似标签）