复制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 css样式表中的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;
}