CODEWITHSUNDEEP
htmlcss
SHT
SHT

Reputation: 720

How to make <a href> clickable without text

I have a table which contain a bunch of links. The links contain no text, instead I'm using the css attribute content to define the look of the links (in this case, the links contain the symbols of facebook, instagram and twitter). So far it looks like it should, but I cannot click on them. I want to avoid using  , so what could I do?

Here's my HTML:

<table style="width: 100%">
    <tbody>
        <tr>
            <td class="fblink">
                    <a href="http://www.facebook.com/ladygaga" target="_blank"></a>
           </td>
            <td class="twlink">
                <a href="http://twitter.com/LadyGaga" target="_blank"></a>
           </td>
            <td class="iglink">
                <a href="http://instagram.com/ladygaga" target="_blank"></a>
            </td>
         </tr>  
    </tbody>
</table>

And my CSS:

table{
   border-collapse: seperate;
   border-spacing: 10px 0;
}

.fblink{
   background: blue;
}
.fblink:before{ 
   content:'\f30c';
}


.twlink{
   background: lightblue;
 }
.twlink:before{ 
   content:'\f309';
 }

.iglink{
   background: red;

 }
.iglink:before{ 
   content:'\f32d';
 }

Can someone help me out? I created a Fiddle for it http://jsfiddle.net/Qf99d/

Thanks in advance

Upvotes: 2

Views: 22229

Answers (14)

seointel
seointel

Reputation: 1

here are two main approaches to create a clickable element without using text in an anchor tag (...):

Using an image:

Replace the text inside the tag with an image () element. Set the href attribute of the tag to the desired link, just like you would with text. Click here When users click on the image, they will be directed to the linked URL.

enter code here

<script>
$(function() {
  $("#the aHref").html("\f30c");
});
</script>

In both approaches, remember to consider accessibility. While an image can have alternative text (alt) to describe it, the second method (using a ) might require additional steps to ensure users with screen readers understand the element's purpose.

Upvotes: 0

Success Bunty
Success Bunty

Reputation: 1

If you want to make a clickable without displaying any visible text, you can achieve this by using CSS to hide the text. Here's how you can do it

Html:

<a href="URL_HERE" class="hidden-link"></a>

CSS:

.hidden-link {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

In the HTML code, replace "URL_HERE" with the actual URL you want to link to. The class="hidden-link" assigns the CSS class to the element.

In the CSS code, the .hidden-link class is defined with the following properties:

display: block; makes the link a block-level element so that it occupies space on the webpage.

width: 0; and height: 0; set the dimensions of the link to zero, making it effectively invisible.

overflow: hidden; ensures that any content inside the link trafficridergames same like a place code (in this case, the text) is hidden and does not overflow.

With these CSS properties, the link will be present on the webpage but won't display any visible text. When users click on the area occupied by the link, they will be redirected to the URL specified in the href attribute.

Upvotes: 0

Crafts Mosaic
Crafts Mosaic

Reputation: 1

You can't expect an href to redirect you if you have nothing to click on mod .

You could use jQuery after the page has loaded, something like this:

<script>
$(function() {
  $("#the aHref").html("\f30c");
});
</script>

Upvotes: 0

Kristinn Vignisson
Kristinn Vignisson

Reputation: 21

Here is a related side-note that's worth mentioning: If you are considering using an <a> tag that has no describable text as its content (like an image or an icon), then you must keep Accessibility in mind. I recommend either including a title attribute or an aria-label attribute. More info: https://dequeuniversity.com/rules/axe/1.1/link-name

Upvotes: 2

Nick Clark
Nick Clark

Reputation: 1446

There are two ways that I know how to do this off the top of my head. Like listed above, you could set the image inside the a tags or you could do an image map. Personally, I would just put the links like this.

<a href="http://www.facebook.com/ladygaga" target="_blank"><img src="File Here" /></a>

And so on. Hope this helps.

Upvotes: 0

Fabian Mebus
Fabian Mebus

Reputation: 2415

Don´t forget: Using table elements for layout purposes is considered a bad practice. Use CSS for layout.

If you want to have the whole table cell clickable and not change your markup, you could go with something like this:

http://jsfiddle.net/Qf99d/8/

CSS:

table{
    border-collapse: seperate;
    border-spacing: 10px 0;
}

.fblink a, .twlink a, .iglink a  {
    display: inline-block;    
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.fblink{
    background: blue;
}
.fblink a:before{   
    content:'\f30c';    
}

.twlink{
    background: lightblue;
}

.twlink a:before{   
    content:'\f309';
}

.iglink{
    background: red;

}
.iglink a:before{   
    content:'\f32d';
}

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 115046

You are adding the pseudo elements in the wrong place...they should be inside the anchor links instead of the table cells

JSfiddle

CSS

table{
    border-collapse: seperate;
    border-spacing: 10px 0;
}
tr td a  {
    display: block;
    text-decoration: none;
    width:100%; /* make anchor full widths */
}
a:before {
    color:white;

}

.fblink{
    background: blue;
}
.fblink a:before{   
    content:'\f30c'; /* now inside anchor */
}


.twlink{
    background: lightblue;
}
.twlink a:before{   
    content:'\f309';
}

.iglink{
    background: red;

}
.iglink a:before{   
    content:'\f32d';
}

Upvotes: 5

Ali Dehghani
Ali Dehghani

Reputation: 176

You must put something in link tag so for example you can add icon tag inside link like this:

<td>
                    <a href="http://www.facebook.com/ladygaga" target="_blank"><i class="fblink"></i></a>
           </td>

Upvotes: 4

VACN
VACN

Reputation: 75

Simply insert the images you want to be able to click on between the <a> brackets.

Upvotes: 1

Claudi
Claudi

Reputation: 5416

You could insert a dummy DIV in the <a> tag if you don't want to use any <img>:

<a href="http://www.facebook.com/ladygaga" target="_blank"><div style="width:1em; height:1em; display:inline-block"></div></a>

Upvotes: 1

J.D. Pace
J.D. Pace

Reputation: 616

Set the width and height of the anchor to the same width and height of the background image. The anchor sizes according to its content (of which there is none) unless overridden.

I checked your fiddle. Make sure the Anchor is sized, not just the containing TD.

Upvotes: 0

Nicolas
Nicolas

Reputation: 1143

You can't expect an href to redirect you if you have nothing to click on.

You could use jQuery after the page has loaded, something like this:

<script>
$(function() {
  $("#theHref").html("\f30c");
});
</script>

Upvotes: -1

Luckie
Luckie

Reputation: 31

Use several   (Space character) between link tags like this

<a href="http://www.facebook.com/ladygaga" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;</a>

Upvotes: -4

Stefan
Stefan

Reputation: 12453

Using CSS set the width of the anchor tag to the size of its parent, i.e. display:block; Whole table cell is clickable than.

Upvotes: 0

Related Questions