字体真棒百分比宽度堆叠图标

这个问题在这里已经有了答案:

  • 是否可以将CSS应用于角色的一半? 18个答案

  • 您可以将容器设置为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/23781.html

    上一篇: Font awesome percentage width stacked icon

    下一篇: CSS Display One Character in 2 Colors