带有链接的可点击图标 [英] Clickable icon with link
本文介绍了带有链接的可点击图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个由社交媒体制成的图标列表，但是只能在图标字母上单击它们，我希望它在任何位置都可以单击，但是我必须单击facebook的"F":
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:
在facebook图标上，我必须直接单击"F"，如果单击蓝点，它将不起作用，该如何解决?这是我的代码:
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>
推荐答案
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>
这篇关于带有链接的可点击图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
