Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-3glyphicons

How to disable the clickable property for Bootstrap glyphicons?

I've included Bootstrap-3 glyphicons on my website:

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

I have voluntarily omitted the href attribute because I don't need the clickable property (these icons are just used for decoration).

The icons remain clickable: the color changes when the mouse comes over them and a underline appears at the same time, giving the illusion that they can be clicked to achieve something...

Is there a way to disable this behavior?

Solution

  • Don't use a, instead use something like span or i. Style the span the way you like.

    HTML:

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

    HTML icon in a:

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

    CSS:

    a span { your style }