移动设备：点击一个字体真棒图标

我有一个字体真棒图标移动设备：点击一个字体真棒图标

<i class="fa fa-angle-up fa-3x custom-close" id="proyect-close"></i>

这是可点击：

$('#proyect-close').click(function(){ 
    $('#proyect').slideUp('slow', function(){ 
    $(window).trigger('resize.px.parallax'); 
    }); 
});

它适用于台式电脑很好，但在手机上（我已经尝试过iPhone和Android），这是因为没有点击事件，我一直在触摸字体真棒图标，什么也没有发生。

我加了display:block;或display:inline-block; CSS的字体真棒，因为我发现在研究上，但也没有工作。以防万一，这是CSS：

.proyecto .custom-close{ 
    display: inline-block; 
    color: white !important; 
    position: absolute; 
    right:10%; 
    margin-top:-5px; 
    min-width:28px; 
    min-height:42px; 
}

如果有人知道为什么发生这种情况，什么是解决它的伎俩，我会真的心存感激。

来源

2015-09-17 pablito.aven

什么是应用于此元素的其余CSS代码？我认为这可能有助于强制宽度和高度，但也许情况已经如此了？ –

@LaurentS。这就是应用于此元素的所有自定义CSS。我只是试着设置高度和宽度，但仍然没有工作。任何其他想法？ –

必须有其他的CSS，因为在这里没有提及图标字体......使用图标字体时你实际点击的是伪元素':: before'或':: after'，并且它就是那个需要有一定宽度和高度的元素。请做一个jsFiddle再现你的问题。 –

我解决了它。诀窍是改变这种

<i class="fa fa-angle-up fa-3x custom-close" id="proyect-close"></i>

此

<a class="custom-close" id="proyect-close"><i class="fa fa-angle-up fa-3x custom-close"></i></a>

我使用的跨度，而不是一个锚的尝试，但somewhy只锚起作用。我还必须添加一些CSS：

a.custom-close{ 
    z-index:2; 
} 
i.custom-close{ 
    z-index:1; 
}

来源

2015-09-17 15:43:28

移动设备：点击一个字体真棒图标

回答

相关问题