ゲームのマテリアルアイコンの変え方について知りたい

Question

"CSS"でこのKrunker.ioというゲームのマテリアルアイコンの変更をしたい
<span class="material-icons-outlined menBtnIcn" style="color:#ff8e0b">storefront</span>
これがソースコードなんだと思いますがstorefrontという部分を直接書き換える以外ではマテリアルアイコンを変更できませんどうすればいいでしょうか
本当にCSSを始めたばかりの馬鹿なので優しく教えてくれるとうれしいです

このゲームのurl:https://krunker.io/

Answer 1

そちらのフォントはリガチャ（合字）を使っています。

その点このマテリアル・アイコンは「合字（ligature）」の仕組みを使っており、上記の例で言うと、アイコンの部分はHTMLでは「accessibility」「assignment」などの文字列が書かれているため、アクセシビリティ面も配慮されています。

Googleのマテリアルアイコンは軽量・デザイン・アクセシビリティOKの優れモノ | 初代編集長ブログ―安田英久 | Web担当者Forum

つまり、「storefront」という文字列に特別にグリフ（字形）を割り当てている特殊なフォントなのです。
ですので、同じ文字列でのリガチャがあるフォントじゃないとCSSで指定しても上手くいかないです。

---

以下のような感じで、疑似要素で対応すれば何とかできるかもです。

.menBtnIcn::before{
  content:"????";
}
.menBtnIcn{
  font-size: 0 !important;
}
.menBtnIcn::first-letter{
  font-size: 60px !important;
}

マテリアルアイコンをそのまま使うならこんな感じでしょうか。

.menBtnIcn::before{
  content:"face";
  display: block;
}
.menBtnIcn{
  height: 50px;
  overflow: hidden;
}

Comments

[Quasar_0330]

あの教えてもらってるくせに注文が多くて申し訳ないんですけど
このコードだとすべてのマテリアルアイコンが変わってしまうんです、、、
補足：shopのところだけ変えたい

[Lhankor_Mhy]

順序依存になってしまいますが、nth-child などを使うしかないでしょうね。

https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child