Html 链接的可点击区域位于错误位置

我想将twitter和instagram的链接添加到导航栏，但是当我使用普通标签添加链接时，可点击区域不是直接在图标上，而是在右侧或底部。我是否可以直接在图标上创建链接区域

.nav{
z指数：1；
排名：0；
位置：绝对位置；
高度：120px；
宽度：100%；
最大宽度：100%；
}
.顶部导航{
排名：0；
位置：固定；
宽度：100%；
最大宽度：100%；
高度：40px；
边框底部：实心1px#efef；
背景：#fff；
z指数：2；
}
.顶部导航a{
顶部：13px；
位置：相对位置；
浮动：对；
右边填充：22px；
}
.顶部导航报价{
字体大小：10px；
顶部：5px；
位置：绝对位置；
左：0；
右：0；
颜色：#000；
}
.fa instagram{
位置：相对位置；
浮动：对；
}
.fa推特{
位置：相对位置；
浮动：对；
}

“每个人都是土生土长的”

绝对定位的

元素重叠并阻止鼠标访问图标。
一种解决方案是将

移动到

---

p位于a上方