Clickable icon with link

Question

I have an icon list made of social media but they're only clickable on the letter of the icon, I want it to be clickable on any spot but I have to click on the "F" of facebook:

On the facebook icon, I have to click literally on the "F", it doesn't work if I click on the blue spot, how can I fix this? Here's my code:

<div class="leftside">
    <ul class="socialmediaicons">
      <li><a href="https://www.facebook.com/EnUnChasquido/"><i class="fa fa-facebook"></i></li></a>
      <li><i class="fa fa-instagram"></i></li>
      <li><i class="fa fa-twitter"></i></li>
      <li><i class="fa fa-youtube"></i></li>
    </ul>
  </div>

stackoverflow.com/questions/12086453/…

ScaisEdge
– ScaisEdge

2018-04-06 05:38:12 +00:00
Commented Apr 6, 2018 at 5:38 — ScaisEdge
– ScaisEdge, Commented Apr 6, 2018 at 5:38
Possible duplicate of wrap anchor tag around li element

ScaisEdge
– ScaisEdge

2018-04-06 05:38:43 +00:00
Commented Apr 6, 2018 at 5:38 — ScaisEdge
– ScaisEdge, Commented Apr 6, 2018 at 5:38

Tahir Shahzad · Accepted Answer · 2018-04-06 05:46:24Z

2

A possible workaround will be using css. anchor is inline element and it only wraps the icon. We need anchor to cover whole area in li

using css

ul li a{
    display:inline-block;
    width:100%;
    height:100%;
}

answered Apr 6, 2018 at 5:46

Tahir Shahzad

6497 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ranveer · Accepted Answer · 2018-04-06 05:58:30Z

li{
	border:1px solid red;
	display: inline-block;
}
.fa{
	padding:15px;
	padding-bottom: 15px;
	padding-top:15px;

}
a{
	display: block;
}

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
	<div class="leftside">
    <ul class="socialmediaicons">
      <li><a href="https://www.facebook.com/EnUnChasquido/"><i class="fa fa-facebook"></i></a></li>
      <li><i class="fa fa-instagram"></i></li>
      <li><i class="fa fa-twitter"></i></li>
      <li><i class="fa fa-youtube"></i></li>
    </ul>
  </div>
</body>
</html>

   <html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
li{
    border:1px solid red;
    display: inline-block;
}
.fa{
    padding:15px;
    padding-bottom: 15px;
    padding-top:15px;

}
a{
    display: block;
}
</style>
</head>
<body>
    <div class="leftside">
    <ul class="socialmediaicons">
      <li><a href="https://www.facebook.com/EnUnChasquido/"><i class="fa fa-facebook"></i></li></a>
      <li><i class="fa fa-instagram"></i></li>
      <li><i class="fa fa-twitter"></i></li>
      <li><i class="fa fa-youtube"></i></li>
    </ul>
  </div>
</body>
</html>

Gerard · Accepted Answer · 2018-04-06 05:53:21Z

I would use inherit for de with and height of the li items. I used flexbox to align everything in the center. When hyperlinks are created for the other icons, you can remove the flexbox settings for li.

li {
  width: 50px;
  height: 50px;
  background-color: pink;
  border: thin solid black;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

li>a {
  width: inherit;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="leftside">
  <ul class="socialmediaicons">
    <li><a href="https://www.facebook.com/EnUnChasquido/"><i class="fa fa-facebook"></i></a></li>
    <li><i class="fa fa-instagram"></i></li>
    <li><i class="fa fa-twitter"></i></li>
    <li><i class="fa fa-youtube"></i></li>
  </ul>
</div>

Collectives™ on Stack Overflow

Clickable icon with link

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related