如何在Slick箭头中仅显示FontAwesome 5图标并去除默认文本？

我完全懂你的困扰——想把Slick滑块默认的"previous/next"文本换成FontAwesome图标，可要么文本和图标一起显示，要么设font-size: 0连图标也没了。下面给你几个实用的解决方案：

方案1：用文本缩进隐藏原始文本 #

这是最稳妥的方法，既能彻底隐藏默认文本，又不会干扰伪元素的图标显示：

.slick-arrow {
  /* 保留你原有的基础样式 */
  position: absolute;
  color: #34495E;
  border: none;
  background-color: transparent;
  z-index: 1;
  top: 15%;
  box-shadow: none;
  padding: 15px 12px;
  /* 新增样式隐藏原始文本 */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

.slick-prev {
  left: -15px;
}

.slick-prev:after {
  content: "\f16c";
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-size: 16px;
  font-weight: 900;
  /* 把图标移回按钮可视区域 */
  position: absolute;
  left: 12px;
  top: 15px;
}

.slick-next {
  right: -15px;
}

.slick-next:after {
  /* 这里换成FontAwesome的右箭头，你之前用的ionicons也可以保留 */
  content: "\f16d";
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-size: 16px;
  font-weight: 900;
  position: absolute;
  right: 12px;
  top: 15px;
}

方案2：用visibility属性分离文本和图标 #

通过父元素隐藏原始文本，再单独让伪元素图标可见，逻辑简单直接：

.slick-arrow {
  /* 保留原有样式，去掉font-size:0 */
  position: absolute;
  color: #34495E;
  border: none;
  background-color: transparent;
  z-index: 1;
  top: 15%;
  box-shadow: none;
  padding: 15px 12px;
  visibility: hidden; /* 隐藏默认文本 */
}

.slick-prev {
  left: -15px;
}

.slick-prev:after {
  content: "\f16c";
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-size: 16px;
  font-weight: 900;
  visibility: visible; /* 让图标显示出来 */
  position: absolute;
  left: 12px;
  top: 15px;
}

.slick-next {
  right: -15px;
}

.slick-next:after {
  content: "\f16d";
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-size: 16px;
  font-weight: 900;
  visibility: visible;
  position: absolute;
  right: 12px;
  top: 15px;
}

方案3：直接修改Slick初始化配置（可选） #

如果你的项目允许调整Slick的初始化代码，直接把箭头按钮的文本设为空，从根源解决问题：

$('.your-slider-selector').slick({
  prevArrow: '<button type="button" class="slick-prev"></button>',
  nextArrow: '<button type="button" class="slick-next"></button>'
});

之后你原来的CSS（去掉font-size:0）就能正常显示图标，因为按钮里本来就没有默认文本了。

最后再确认下：你加的FontAwesomeConfig = { searchPseudoElements: true };这段代码，一定要放在引入FontAwesome的脚本之前，否则伪元素的图标可能无法被正确识别哦。

内容的提问来源于stack exchange，提问作者Mohib