Expert Icons

Expert Enterprise 系の アイコンWebフォント。CSSクラス指定で表示する。プレフィックスは ei。

version 0.0.0 ／ 全 463 アイコン ／ 21 カテゴリ

導入

CDN で読み込む。latest は常に最新版を指す。バージョン指定は固定され、旧版はそのまま残置される。

<!-- 常に最新 -->
<link rel="stylesheet" href="https://cdn.expert-g.cloud/l/expert-icons/latest/css/expert-icons.min.css">

<!-- バージョン固定（推奨・再現性重視） -->
<link rel="stylesheet" href="https://cdn.expert-g.cloud/l/expert-icons/0.0.0/css/expert-icons.min.css">

latest URLをコピー 0.0.0 URLをコピー

パターン: https://cdn.expert-g.cloud/l/expert-icons/{latest|<version>}/css/expert-icons.min.css。フォントは CSS からの相対参照（../fonts/）で解決される。別オリジン配信時はフォントに CORS 設定が必要。

CSSの選択（全体 / 個別）

• 全体: expert-icons.min.css … 全カテゴリを 1 フォント（expert-icons.woff2）で読み込む。
• 個別: expert-icons-<category>.min.css（例 expert-icons-brands.min.css）… そのカテゴリのフォント（expert-icons-<category>.woff2）のみを読み込む（軽量）。

<!-- 全体（全カテゴリ） -->
<link rel="stylesheet" href="https://cdn.expert-g.cloud/l/expert-icons/0.0.0/css/expert-icons.min.css">
<!-- 個別（brands のみ） -->
<link rel="stylesheet" href="https://cdn.expert-g.cloud/l/expert-icons/0.0.0/css/expert-icons-brands.min.css">

使い方

スタイルクラス（.ei-<category>） ＋ アイコンクラス（.ei-<name>） を併記する。

<i class="ei-animal ei-budgerigar-body" aria-hidden="true"></i>

• 色: currentColor 運用。color プロパティで変更できる。
• サイズ: font-size、またはユーティリティ ei-lg / ei-xl / ei-2x / ei-3x / ei-fw。
• アクセシビリティ: 装飾目的は aria-hidden="true"。意味を持つ場合は代替テキスト（aria-label 等）を付与する。

アニメーション

アニメーションと静的トランスフォームを用意。アイコンクラスに併記するだけで動作する（ei-animal ei-budgerigar-body ei-spin など）。

<!-- 右回転 / 左回転 -->
<i class="ei-animal ei-budgerigar-body ei-spin"></i>
<i class="ei-animal ei-budgerigar-body ei-spin-reverse"></i>

<!-- 速度・回数を変更（例: 0.5秒・3回だけ） -->
<i class="ei-animal ei-budgerigar-body ei-beat" style="--ei-animation-duration:.5s; --ei-animation-iteration-count:3"></i>

<!-- 色変化（2色間パルス。--ei-color-to で終点色を指定） -->
<i class="ei-animal ei-budgerigar-body ei-color-pulse" style="--ei-color-to:#e0245e"></i>

<!-- 静的な回転・反転 -->
<i class="ei-animal ei-budgerigar-body ei-rotate-90"></i>
<i class="ei-animal ei-budgerigar-body ei-flip-horizontal"></i>

• 回転: ei-spin(右) / ei-spin-reverse(左) / ei-spin-pulse(段階) / ei-pulse。
• 動き: ei-beat / ei-fade / ei-beat-fade / ei-bounce / ei-flip / ei-shake。
• 色変化: ei-color-cycle（色相回転）/ ei-color-rainbow / ei-color-pulse（--ei-color-from／--ei-color-to の2色間）。
• 静的トランスフォーム: ei-rotate-90/180/270 / ei-rotate-by（--ei-rotate-angle）/ ei-flip-horizontal/vertical/both。
• 制御変数: --ei-animation-duration / -delay / -iteration-count / -timing / -direction。個別に --ei-beat-scale・--ei-fade-opacity・--ei-bounce-height・--ei-flip-angle 等も上書き可。
• prefers-reduced-motion: reduce の環境では自動的に停止する。

ライセンス

本ソフトウェア等は subscription（サブスクリプション契約に基づく利用許諾） に基づき利用許諾されます。買い切り製品・IT機器等には利用権は含まれません。詳細は LICENSE を参照。

Copyright ExpertEnterprise Inc.

アイコン一覧

「HTMLコピー」で <i> タグをコピーできます。

animal .ei-animal / 16

brands .ei-brands / 14

car .ei-car / 39

carparts .ei-carparts / 41

eat .ei-eat / 13

electric .ei-electric / 31

iot .ei-iot / 13

life .ei-life / 17

map .ei-map / 8

mark .ei-mark / 8

network .ei-network / 22

office .ei-office / 5

pc .ei-pc / 78

pcb .ei-pcb / 31

protocol .ei-protocol / 9

sign-instruction .ei-sign-instruction / 11

sign-regulation .ei-sign-regulation / 23

sign-warning .ei-sign-warning / 26

tools .ei-tools / 11

traffic .ei-traffic / 16

weather .ei-weather / 31