html - 复制 Bootstrap Carousel 箭头

Question

我看到了bootstrap 3 carousel箭头是使用 CSS 制作的。我试图在不同的元素上复制 css 代码，但它不起作用。

我的 html 文件如下所示:

<span class="arrow"></span>

我的 css 文件如下所示:

.arrow:before {
    display: inline-block;      
    height: 15px;
    width: 15px;
    content: "";
    vertical-align: middle;
    font-family: "Glyphicons Halflings";        
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    color: #000;
}

我也导入了字体，但它不起作用。谁能帮我解决这个问题？

Answer 1

您可以通过在您的 css 样式表中使用 @import bootstrap-glyphicons.css 来实现，如下所示:

JSFiddle - DEMO

HTML:

<span class="arrow"></span>

CSS:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");

 .arrow {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family:'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    font-size: 30px;
}
.arrow:before {
    display: inline-block;
    height: 15px;
    width: 15px;
    content:"\e080";
    vertical-align: middle;
    font-family:"Glyphicons Halflings";
    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: 1;
    color: #000;
}