素晴らしいフォント

プロジェクトに Font Awesome を含めます:
次の行を HTML の

アイコンを使用する

アイコンを使用するには、適切なクラスを持つ 要素または 要素を追加します:

マテリアルアイコン

プロジェクトにマテリアル アイコンを含めます:
次の行を HTML の

アイコンを使用する

アイコンを使用するには、クラスmaterial-iconsとアイコン名を含む要素を追加します:

camera_alt

2.カスタムアイコンにCSSを使用する

CSS を使用して独自のアイコンを作成することもできます。純粋な CSS を使用した簡単な例を次に示します:

基本的な HTML 構造を作成する

CSS を追加してアイコンのスタイルを設定します

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}

この CSS スニペットは、境界線と位置を使用して単純な星の形を作成します。

3. SVG アイコン

高品質のアイコンに SVG を使用することもできます:

インライン SVG

SVG を背景画像として使用する

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg xml;base64,...') no-repeat center center;
    background-size: contain;
}

ヒント

サイズと色: フォント アイコンとインライン SVG の場合は、font-size または幅と高さのプロパティでサイズを調整し、SVG の色または塗りつぶしで色を変更できます。
アクセシビリティ: 必要に応じて説明テキストまたは aria 属性を追加して、アクセシビリティを常に考慮してください。
自由に実験してさまざまな方法を組み合わせて、プロジェクトに最適なものを見つけてください!