Question

我希望代码中的div类在div的内容开头（或之后）有一个图标。基本上我所做的是将glyphicon CSS复制并粘贴到所需的CSS类中（并使用<body ng-app> <textarea ng-model="test" ng-trim="false" maxlength="1500"></textarea> <span>{{1500 - test.length}} left</span> </body>和:before来指定位置）

所以基本上div如下：

:after

和CSS：

<div class="leaf in-leaf">in-elem1</div>

结果：

有没有比使用相同的glyphicon CSS更好的方法呢？也许是一种简单地将glyphicon绑定到类的方法？

Answer 1

您可以覆盖类.glyphicon和.glyphicon:before的样式，只要它与其他类.leaf一起使用，然后您可以使用所需的任何.glyphicon，如图所示下面的片段：

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.leaf-holder {
  border: 1px solid #000;
  margin: 0 auto;
  width: 200px;
}

.leaf.glyphicon {
  display: block;
  line-height: 20px;
  top: auto;
}

.leaf.glyphicon:before {
  position: absolute;
  right: 0;
  top: 0;
}

＆＃13;

<div class="leaf-holder">
<div class="leaf glyphicon glyphicon-triangle-right">in-elem1</div>
</div>
<div class="leaf-holder">
<div class="leaf glyphicon glyphicon-menu-hamburger">in-elem1</div>
</div>
<div class="leaf-holder">
<div class="leaf glyphicon glyphicon-apple">in-elem1</div>
</div>
<div class="leaf-holder">
<div class="leaf glyphicon glyphicon-triangle-right">in-elem1</div>
</div>

＆＃13;

如何将图标设置为类？

1 个答案: