Question

我在使用flexslider时遇到了一些问题，导航箭头显示不正常。我试着编辑“flexslider.css”但没有成功，有什么线索可以解决这个问题吗？（看看图片，我的浏览器[Chrome]正在显示这些字体而不是图像，在IE上它只是一个隐形块中的链接）。 [Ps：我正在使用Bootstrap。]

（Ps²：我试图将图像放在箭头位置，这样我就可以看起来像这样：(http://cleancanvas.herokuapp.com/)

（[编辑]Ps³：为了清楚......我的箭头不是出现，我该如何解决？我试图把它这个代码围绕第52行，那个家伙在下面的评论中发布的教程说background: url(http://www.your_domain.com/flex/images/bg_direction_nav.png) no-repeat 0 0;但它不会工作。“字体”“fl”和“fi”（见图）仍在那个地方:(

HTML

<section class="flexslider">
    <ul class="slides">
        <li>
            <img src="http://placehold.it/1600x500">
        </li>
        <li>
            <img src="http://placehold.it/1600x500">
        </li>
        <li>
            <img src="http://placehold.it/1600x500">
        </li>
    </ul>
</section>

CSS

.flexslider {
    margin-top:90px;
    max-height:450px;
    border:0;
    border-radius:0px;
    overflow:hidden;
}

.flex-control-nav {
    top:400px;
    opacity:0.5;
    filter:alpha(opacity=0.5);
}

JS

$(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        easing: "linear",
        useCSS: false,
        pauseOnHover: true,
        slideshowSpeed: 7500,
        animationSpeed: 750,
    });
});

图片：here

Answer 1

这是因为您错过了 /fonts/ 文件夹...在flexslider.css的顶部，有以下代码：

@font-face {
    font-family: 'flexslider-icon';
    src:url('fonts/flexslider-icon.eot');
    src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
        url('fonts/flexslider-icon.woff') format('woff'),
        url('fonts/flexslider-icon.ttf') format('truetype'),
        url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
    font-weight: normal;
    font-style: normal;
}

基本上你需要确保/ fonts /文件夹与flexsider.css文件一起 - 或者至少编辑上面的CSS指向你的字体路径。

Flexslider箭头窃听，如何解决？

1 个答案: