Нажмите значок и текст внутри li

Question

У меня есть значок и текст, кроме значка. Я сделал значок кликабельным, но не могу сделать текст доступным. Это кажется простым, но я пробовал разные способы и не могу заставить его работать.

DEMO

Answer 1

Использование cursor: pointer; на span элемента;)

Вопрос заключается в том, что a элемент (который имеет cursor: pointer; свойство по умолчанию не содержит текст, который находится на span элемент)

EDIT

Как сказано @Justin так как он не будет запускать ссылку таким образом. Таким образом, вам необходимо закрыть 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>