Span with a href link not working

Question

Working to put a href in a span class, but I cant get the href link to work.

<a href="../../public/bassengweb/logout">Logg ut<span class="label label-danger"></span></a>

Also the label-danger wont show up.

Solution 1

Link to working span - Bootply

That's because of this line in the CSS:

.label:empty{
  display:none;
}

If you write something between the span tags, it will work.

<a href="../../public/bassengweb/logout"><span class="label label-danger">Logg ut</span></a>

Although, it will look terrible with 'normal' bootstrap label when hovered, maybe do something like this:

<a href="../../public/bassengweb/logout">Logg ut</a><span class="label label-danger">Danger</span>

Solution 2

This is the best way! It works easy and clean.

<span onclick="window.location.href='www.google.com';">text</span>

and then you can give it a class:hover for the color

Solution 3

The <span> with class label should have content, check the Boostrap's example Boostrap Component - Label Maybe you should try to put an "x"

<a href="../../public/bassengweb/logout">Logg ut<span class="label label-danger">x</span></a>

or use glyphicons, maybe

<a href="../../public/bassengweb/logout">Logg ut<span class="label label-danger"><span class="glyphicon glyphicon-circle-arrow-right"></span></span></a>

Comments

[collapsar]

shouldn't it be the other way round (anchor embedded in the span) if you wish the class to cover the a element ? why don't you assign the class to a ? what do you mena by "does't show up" ?

[Laurel]

You don't want to use a GET for logging out.

[Laurel]

This is terrible for accessibility. It cannot be accessed with a keyboard, and prevents many other interactions such as right click, shift+click, drag+drop.