フォントのすごいアイコンがクリックに反応しない

Question

私は次のようなボタンを持っています。ボタンは<の>リンクで作成され、ボタンのテキストは目のすばらしいアイコンです。

<a class="action-button ng-scope" 
    ng-click="orderCtrl.showDetails(gridItem)"> 
     <i class="fa fa-eye"></i> 
</a> 

CSS：

.action-button { 
    display: inline-block; 
    padding: 3px 5px 5px 4px; 
    margin: 0 2px; 
    border: 1px solid rgb(172, 172, 172); 
    width: 23px; 
    border-radius: 3px; 
    height: 23px; 
    box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.37) inset; 
    cursor: pointer; 
    line-height: 14px; 
} 
fa { 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    position: relative; 
} 

は今奇妙である私は、フォント、素晴らしい目の形の外側の領域でクリックした場合、ボタンのみ動作することです。私が目の中をクリックすると、それは誘発しません。

Answer 1

2つの同様の概念を混在させるため、アンカータグを含める必要はありません。

これを代わりに実行してください。

<i class="fa fa-eye" ng-click="showDetails(gridItem)"></i>