Css - Create a pictograph with FontAwesome icons-CodePudding

I'm trying to represent the number of years as filled (blue) and unfilled (grey) circles using fontawesome icons. I'm wondering if there is a way to do this without manually specifying the icons to fill in, but instead something like a bar graph?

The way I'm doing this now is:

.container-icon{
  color: rgb(155,155,155);
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
</head> 

<body>
  <div >
    <div >
      <p>Item Number 1</p>
      <div >
        <i  style="color:blue"></i>
        <i  style="color:blue"></i>
        <i  style="color:blue"></i>
        <i ></i>
        <i ></i>
      </div>
      <p>Item Number 2</p>
      <div >
        <i  style="color:blue"></i>
        <i  style="color:blue"></i>
        <i ></i>
        <i ></i>
        <i ></i>
      </div>
      <p>Item Number 3</p>
      <div >
        <i  style="color:blue"></i>
        <i  style="color:blue"></i>
        <i  style="color:blue"></i>
        <i  style="color:blue"></i>
        <i ></i>
      </div>
    </div>
  </div>
</body>

Is there a more efficient way to create this pictograph, where I enter the number and that number of icons are filled in with blue?

CodePudding user response：

No need an icon library for this, use CSS

.container-icon {
  height: 20px;  /* adjust this to control the size */
  aspect-ratio: 5.5;
  background: linear-gradient(90deg, blue calc(var(--n, 0)*20%), rgb(155, 155, 155) 0);
  -webkit-mask: radial-gradient(50% 50%, #000 87%, #0000 91%) 0/18.18% 100% space;
}

<div >
  <div >
    <p>Item Number 1</p>
    <div  style="--n:1"></div>
    <p>Item Number 1</p>
    <div  style="--n:2"></div>
    <p>Item Number 2</p>
    <div  style="--n:3"></div>
    <p>Item Number 3</p>
    <div  style="--n:4"></div>
    <p>Item Number 3</p>
    <div  style="--n:5"></div>
  </div>
</div>