用 FontAwesome 图标替换 jQuery datepicker prev 和 next 图标答案

【问题标题】：Replace jQuery datepicker prev and next icons with FontAwesome icons用 FontAwesome 图标替换 jQuery datepicker prev 和 next 图标
【发布时间】：2017-11-23 17:12:34
【问题描述】：

我正在使用 jQuery datepicker，我希望能够用 FontAwesome 替换它的 prev 和 next 图标，以获得更好的可扩展性和更漂亮的 UI。有没有人设法找到一种方法来做到这一点？

【问题讨论】：

能否请您告诉我们您现在面临的问题，而不是询问其他人
我认为我的问题很明显。我找不到一种方法来覆盖 jQuery datepicker prev 和 next 按钮图标来使用 Fontawesome。

标签： css font-awesome jquery-ui-datepicker

【解决方案1】：

我们可以使用 CSS 覆盖图标，因为插件不允许这样做。在下面的 sn-p 中，我们隐藏了常规按钮，并添加了一个带有 Font Awesome Icon 的 :before 伪元素。

请注意，您必须使用图标的代码点（即\f100）而不是其类名（即fa-angle-double-left）。

$(function() {
  $("#datepicker").datepicker();
});

.ui-datepicker-prev span,
.ui-datepicker-next span {
  background-image: none !important;
}

.ui-datepicker-prev:before,
.ui-datepicker-next:before {
  font-family: FontAwesome;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  font-weight: normal;
  align-items: center;
  justify-content: center;
}

.ui-datepicker-prev:before {
  content: "\f100";
}

.ui-datepicker-next:before {
  content: "\f101";
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
  Date:
  <input type="text" id="datepicker">
</p>

JSFiddle

【讨论】：

【解决方案2】：

在原有的jQuery UI代码中直接修改图标是完全可以的，打开文件 jquery-ui.min.js （当然，您必须在没有 CDN 的情况下直接处理文件！）并修改以下行：

在 jquery-ui.min.js 中

1 - 查找：

<a class='ui-datepicker-prev ui-corner-all' data-handler='prev' data-event='click' title='"+i+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"e":"w")+"'>"+i+"</span></a>":q?"":"<a class='ui-datepicker-prev ui-corner-all ui-state-disabled' title='"+i+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"e":"w")+"'>"+i+"</span></a>

替换为：

<a class='ui-datepicker-prev ui-corner-all' data-handler='prev' data-event='click' title='"+i+"'><span class='fa fa-angle-left' aria-hidden='true'>"+i+"</span></a>":q?"":"<a class='ui-datepicker-prev ui-corner-all ui-state-disabled' title='"+i+"'><span class='fa fa-angle-left' aria-hidden='true'>"+i+"</span></a>

2 - 查找：

<a class='ui-datepicker-next ui-corner-all' data-handler='next' data-event='click' title='"+n+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"w":"e")+"'>"+n+"</span></a>":q?"":"<a class='ui-datepicker-next ui-corner-all ui-state-disabled' title='"+n+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"w":"e")+"'>"+n+"</span></a>

替换为：

<a class='ui-datepicker-next ui-corner-all' data-handler='next' data-event='click' title='"+n+"'><span class='fa fa-angle-right' aria-hidden='true'>"+n+"</span></a>":q?"":"<a class='ui-datepicker-next ui-corner-all ui-state-disabled' title='"+n+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"w":"e")+"'>"+n+"</span></a>

我写了一篇关于这种方法的文章，页面底部有一个示例链接。 -> 文章在这里：https://sns.pm/Article/Utiliser-les-icones-de-Font-Awesome-avec-Datepicker-jQuery-UI

-> 采样：https://sns.pm/DEMOS-ARTICLES/Article-DEMO-jQuery-ui-font-awsome/

希望能帮上点忙……

【讨论】：