Bootstrap 3 图标样式的问题

第一个问题：图标不能正确显示

图标样式正确显示要保证：

1、字体文件路径正确；

2、需要显示图标的地方设置字体css样式 font-family: Glyphicons Halflings;

第二个问题：不想要显示的图标，想换成自己的图片

下面是一个图片旋转木马carousel，通过修改CSS来实现

    <div id="carousel-1" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-1" data-slide-to="1"></li>
            <li data-target="#carousel-1" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">

            </div>
            <div class="item">

            </div>
            <div class="item">

            </div>
        </div>
        <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev" style="opacity:0.3">
            <span class="glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next" style="opacity:0.3">
            <span class="glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>

    </div>

CSS如下：

.glyphicon-chevron-left {
    font-family: Glyphicons Halflings;
}

.glyphicon-chevron-right {
    font-family: Glyphicons Halflings;
}

.glyphicon-chevron-left:before {
    content: "";
}

.glyphicon-chevron-right:before {
    content: "";
}

.left.carousel-control {
    background-image: url('images/scroll_forward.png');
    background-size: 50%;
    background-origin: content-box;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.right.carousel-control {
    background-image: url('images/scroll_next.png');
    background-size: 50%;
    background-origin: content-box;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

 

转载于:https://www.cnblogs.com/LLLLoveLLLLife/p/8033703.html