复制 Bootstrap 轮播箭头

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

你可以通过 @import bootstrap-glyphicons.css 在你的 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;
}