CSS Specificity is preventing me from overriding content property

[goldmont]

As appropriate, please include:

• Operating system and version: Ubuntu 22.04
• Browser and version: Chrome 124.0.6367.60
• A reduced test case: Codepen

Hi,

As you can see from the test case hosted on Codepen, the class bi-file-earmark-zip is unable to override bi-file-earmark because the latter has higher specificity. I think that every icon class should mark the content property as !important.

[mdo]

What can't you override?

The selector we use applies to all ~2,000 generated classnames for each icon.

.bi::before, 
[class*=" bi-"]::before, 
[class^=bi-]::before {
  /* ... */
}

[goldmont]

As you can see from your screenshoot too, I expect to see the bi-file-earmark-zip icon instead of bi-file-earmark.

bi-file-earmark (Bootstrap Icons):

bi-file-earmark-zip (Bootstrap Icons):

I'm using bi-file-earmark as a fallback for extensions that don't have an own icon. By the way, every bi-file-earmark-* placed after bi-file-earmark is unable to override the former's content property due to CSS specificity.