Bootstrap 3 图标样式的问题
第一个问题:图标不能正确显示
图标样式正确显示要保证:
1、字体文件路径正确;
2、需要显示图标的地方设置字体css样式 font-family: Glyphicons Halflings;
第二个问题:不想要显示的图标,想换成自己的图片
下面是一个图片旋转木马carousel,通过修改CSS来实现
<div 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" > <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" > <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; }