Font awesome percentage width stacked icon

This question already has an answer here:

Is it possible to apply CSS to half of a character? 18 answers

---

您可以将容器设置为display:inline-block ，并且只将顶部图标设置为position:absolute 。

.container {
  font-size: 200px;
  position: relative;
  display: inline-block;
}
.star-under {
  color: #ddd;
  vertical-align: top;
}
.star-over {
  color: #f80;
  position: absolute;
  left: 0;
  top: 0;
  width: 70%;
  overflow: hidden;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
  <span class="star star-under fa fa-star"></span>
  <span class="star star-over fa fa-star"></span>
</div>

链接地址: http://www.djcxy.com/p/23782.html

上一篇: 如何在HTML（CSS）中绘制一个字母或文本的一半？

下一篇: 字体真棒百分比宽度堆叠图标