如何将图标设置为类?

时间:2016-08-18 06:17:37

标签: html css

我希望代码中的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>

结果:
enter image description here

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

1 个答案:

答案 0 :(得分:3)

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

&#13;
&#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;
&#13;
&#13;