如何用 Font Awesome 图标替换 bxSlider 控件

Question

我目前在我的网页中使用 bxslider，但是如何将下一个上一个更改为字体真棒图标？ 是否可以？ 我应该更改哪个代码？ 谢谢。

下面是我的 html 和 js 代码。

HTML：

 <div class = "container-fluid"> <div id="slider1"> <div class=""> <div class="panel panel-default"> <div class="ribbon ribbon-pt-acc">Account</div> <img src="../../images/game/assassin.jpg" class="panel-img img-responsive"> <div class="panel-body"> <div class="offer-title"><h5 class="text-danger">Player of the Month: Messi</h5></div> <div class="offer-desc text-muted small"> FIFA 15 <br /> Xbox ONE </div> <h4 class="txt-1line"><b>RM 103.90</b></h4> </div> </div> </div> <div class=""> <div class="panel panel-default"> <div class="ribbon ribbon-pt-acc">Currency</div> <img src="../../images/game/ff-tactics.jpg" class="panel-img img-responsive"> <div class="panel-body"> <div class="offer-title"><h5 class="text-danger">5,000 GOLD</h5></div> <div class="offer-desc text-muted small"> 1 Gold = RM 0.70 <br /> Aegwynn - Alliance </div> <h4 class="txt-1line"><b>RM 23.90</b></h4> </div> </div> </div> <div class=""> <div class="panel panel-default"> <div class="ribbon ribbon-pt-acc">Item</div> <img src="../../images/game/harvest-moon.jpg" class="panel-img img-responsive"> <div class="panel-body"> <div class="offer-title"><h5 class="text-danger">Legendary Weapon's Raw Materia</h5></div> <div class="offer-desc text-muted small"> Guild Wars 2 <br /> All Servers </div> <h4 class="txt-1line"><b>RM 486.50</b></h4> </div> </div> </div> <div class=""> <div class="panel panel-default"> <div class="ribbon ribbon-pt-acc">Boosting</div> <img src="../../images/game/hero.jpg" class="panel-img img-responsive"> <div class="panel-body"> <div class="offer-title"><h5 class="text-danger">10,000 GOLD</h5></div> <div class="offer-desc text-muted small"> 1 Gold = RM 0.007 <br /> Aefwynn - Alliance </div> <h4 class="txt-1line"><b>RM 48.50</b></h4> </div> </div> </div> <div class=""> <div class="panel panel-default"> <div class="ribbon ribbon-pt-acc">Card</div> <img src="../../images/game/lol.jpg" class="panel-img img-responsive"> <div class="panel-body"> <div class="offer-title"><h5 class="text-danger">Legendary Weapon's Raw Materia</h5></div> <div class="offer-desc text-muted small"> World of Warcraft <br /> Firetree - Horde </div> <h4 class="txt-1line"><b>RM 263.10</b></h4> </div> </div> </div> <div class=""> <div class="panel panel-default"> <div class="ribbon ribbon-pt-acc">Currency</div> <img src="../../images/game/reckoning.jpg" class="panel-img img-responsive"> <div class="panel-body"> <div class="offer-title"><h5 class="text-danger">Something os Something Epicness</h5></div> <div class="offer-desc text-muted small"> Guild Wars 2 <br /> All Servers </div> <h4 class="txt-1line"><b>RM 82.50</b></h4> </div> </div> </div> <div class=""> <div class="panel panel-default"> <div class="ribbon ribbon-pt-acc">Account</div> <img src="../../images/game/sanguo.jpg" class="panel-img img-responsive"> <div class="panel-body"> <div class="offer-title"><h5 class="text-danger">Player of the Month: Messi</h5></div> <div class="offer-desc text-muted small"> FIFA 15 <br /> Xbox ONE </div> <h4 class="txt-1line"><b>RM 103.90</b></h4> </div> </div> </div> </div> </div>

这里是 bxslider Javascript：

 /** RESET AND LAYOUT ===================================*/ .bx-wrapper { position: relative; margin: 0 auto 60px; padding: 0; *zoom: 1; } .bx-wrapper img { max-width: 100%; display: block; } /** THEME ===================================*/ .bx-wrapper .bx-viewport { -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; border: 5px solid #fff; left: -5px; background: #fff; /*fix other elements on the page moving (on Chrome)*/ -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0); } .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; } /* LOADER */ .bx-wrapper .bx-loading { min-height: 50px; background: url(images/bx_loader.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } /* PAGER */ .bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px; } .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } .bx-wrapper .bx-pager.bx-default-pager a { background: #666; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; } /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 10px; background: url(images/controls.png) no-repeat 0 -32px; } .bx-wrapper .bx-next { right: 10px; background: url(images/controls.png) no-repeat -43px -32px; } .bx-wrapper .bx-prev:hover { background-position: 0 0; } .bx-wrapper .bx-next:hover { background-position: -43px 0; } .bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 9999; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(images/controls.png) -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(images/controls.png) -86px -44px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } /* IMAGE CAPTIONS */ .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666\\9; background: rgba(80, 80, 80, 0.75); width: 100%; } .bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; }

Answer 1

只需尝试添加fa - icons如下：

$('.bxslider').bxSlider({
        nextText: '<i class="fa fa-angle-right"></i>',
        prevText: '<i class="fa fa-angle-left"></i>'
}); 

对于其他选项，请在此处查看此解决方案

Answer 2

如果您将字体很棒的图标添加为 nextText 和 prevText，请从 bxSlider 的 css 中删除 text-indent 属性。 选择器是 .bx-wrapper .bx-controls-direction a。 这个规则在使用标准值时是有意义的，但是如果你使用 *text-properties 添加图标，就像我们的例子一样，缩进隐藏了视口之外的图标。