hustlemouse謹製ウェブアイコン（2022年2月2日現在版）
つぎが、上のエレメントのマークアップです。（それぞれに名前もついています。）
<ul class=”webIconsList”> <li><span class=”webIcon-hustlemouse”></span></li> <li><span class=”webIcon-schopme”></span></li> <li><span class=”webIcon-379inc”></span></li> <li><span class=”webIcon-Museum”></span></li> <li><span class=”webIcon-dropDown”></span></li> <li><span class=”webIcon-upBarArrw”></span></li> <li><span class=”webIcon-dwnBarArrw”></span></li> <li><span class=”webIcon-Clipboard”></span></li> <li><span class=”webIcon-Facebook”></span></li> <li><span class=”webIcon-Twitter”></span></li> <li><span class=”webIcon-Instagram”></span></li> <li><span class=”webIcon-YouTube”></span></li> </ul> <style> ul.webIconsList {line-height:3.9em;} ul.webIconsList li { display:inline-block; margin-right:2.0rem; color:var(–thmClr); } ul.webIconsList li span { line-height:2.6rem; font-size:2.6rem; } </style>
CSSによる運用は次のとおりです。
まず、:root{}にて個別のウェブアイコンのIDを代入した変数を宣言しておきます。
:root { –hustlemouse:’\e377′; }
当該エレメントにウェブアイコンのfont-familyを指定する。（spanタグにクラス指定して運用をしてます。）
span.webIcon-hustlemouse {font-family:hustleIcon;}
擬似要素（::before）にてcontentプロパティの値に上の変数を指定する。
span.webIcon-hustlemouse::before {content:var(–hustlemouse);}
つぎが、各アイコンに振られたIDです。
- e377
- e378
- e379
- e401
- e402
- e403
- e404
- e405
- e901
- e902
- e903
- e904
つぎのようにspanタグの中に文字列を入れれば、アイコンとセットで表示もできます。
<span class=”webIcon-hustlemouse”>e377</span>
以下、利用例です。