问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

带有链接的可点击图标

社区维基
1
新手上路，请多包涵

我有一个由社交媒体组成的图标列表，但它们只能在图标的字母上点击，我希望它在任何地方都可以点击，但我必须点击 facebook 的“F”： 在此处输入图像描述

在 facebook 图标上，我必须按字面意思点击“F”，如果我点击蓝色点，它不起作用，我该如何解决这个问题？这是我的代码：

 <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>

原文由 user9433918 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcsshyperlinkicons
阅读 484
1 个回答
得票最新
社区维基
1
 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>

原文由 Ranveer 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题