里面的可点击图标和文字

Question

除了图标，我还有一个图标和文字。我使图标可点击，但不能使文字也可点击。这似乎很简单，但我尝试了不同的方法，但无法使其发挥作用。

DEMO

Answer 1

在cursor: pointer;元素上使用span;）

问题是a元素（默认情况下具有cursor: pointer;属性不包含span元素上的文本）

修改

正如@Justinas所说，它不会以这种方式触发链接。因此，您必须在<{strong> a元素之后关闭span代码。

为了保持良好的风格，here's the working code.

i {
      border-radius: 50%;
    border: 2px solid green;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 25px !important;
    color: green;
}
a { text-decoration: none !important; display: inline-block }

Answer 2

只需在a之后关闭span代码，而不是i

<a href="tel:+46706003303" class="">
    <i class="fa fa-phone"></i>
    <span>+1 234 567 89</span>
</a>