Question

我有一个字体很棒的图标

<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;
}

如果有人知道为什么会这样，以及解决这个问题的诀窍，我会非常感激。

Answer 1

我解决了。诀窍是改变这个

<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>

我尝试使用span而不是锚，但是为什么它只适用于锚。我还必须添加一些CSS：

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

Answer 2

您必须明确告诉Safari这是可点击的元素。

在您的CSS中添加一个类：

.fa-clickable {
    cursor:pointer;
    outline:none;
}

，然后将该类添加到可单击的fontawesome图标中：

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

移动设备：单击Font Awesome图标

2 个答案: