如何綁定字體真棒圖標上的事件？

我想綁定字體真棒圖標上的click事件。然而，圖標本身不可點擊，只有當我插入附加文本時，文本纔會被綁定。如何綁定字體真棒圖標上的事件？

如何綁定圖標本身？

<span class="icon-star"> 
    only this text is clickable, the icon itself is not 
</span> 

<script type="text/javascript"> 
(function($) { 
    $('span.icon-star').on('click', function() { 
     console.log($(this)); 
    }); 
})(jQuery); 
</script>

來源

2012-09-10 k0pernikus

在CSS中爲span設置寬度/高度是不是問題？（你需要'display：block'或'display：inline-block'） –

只需指出 - 你的選擇器是要求所有'.icon-star'元素都是**子元素的跨度，而我認爲你想'span.icon-star'。 –

@ChrisFrancis它確實沒有解決問題。你可以添加這個作爲anwer給我upvote並接受:)我將編輯示例代碼jQuery選擇器。 – k0pernikus

如上所討論的，給跨度block或inline-block佈局將解決問題。至於爲什麼會發生這種情況與非標準字體，我不完全確定，但這可能是由於瀏覽器不識別該字符，因此假設span標記爲空，從而將其摺疊爲0寬度和身高。

來源

2012-09-10 17:18:06

這裏是另一個解決方案，我用這似乎更清楚地回答這個問題，只是結合的圖標，不需要其他的文字。只需將它包裝在設置ID的span中即可。這裏是一個例子：

<span id="menuOpen"> 
    <i class="fa fa-navicon"></i> 
</span> 

$("#menuOpen").click(showMenu);

希望可以幫助別人。

來源

2017-09-14 18:26:11 snazitup

另一種解決方案是寫的onClick直接進入我的標籤，因爲這：

<i class="fa fa-navicon" onClick="functionName()"></i>

是，經過小時的測試，上述方案做這些事，然後我知道這可能是真棒圖標的問題，搜索帶我到這。

來源

2018-02-22 15:46:57 Albert

如何綁定字體真棒圖標上的事件？

回答

相關問題