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)中绘制一个字母或文本的一半?

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