CSS アイコンと例

CSS アイコン

アイコン ライブラリを使用すると、HTML ページにアイコンを簡単に追加できます。

アイコンを追加する方法

HTML ページにアイコンを追加する最も簡単な方法は、Font Awesome などのアイコン ライブラリを使用することです。
指定したアイコン クラスの名前をインライン HTML 要素 ( や など) に追加します。
CSS アイコンは、
を使用して作成されるシンボルまたはグラフィック表現です。 PNG や SVG などの従来の画像形式ではなく、CSS (Cascading Style Sheets)。
これらは、画像ファイルに依存せずに Web サイトに視覚要素を追加するために Web デザインでよく使用されます。
CSS アイコンを作成するには、いくつかの一般的な方法があります:

フォントアイコン:

これらは、Font Awesome、マテリアル アイコン、イオン アイコンなどの特別なアイコン フォントから作成されたアイコンです。これらのフォントには、CSS でスタイル設定できるグリフ (シンボル) のセットが含まれています。

たとえば

.fa-heart のようなクラスを使用して HTML にハートのアイコンを追加し、CSS プロパティでスタイルを設定することもできます。

CSS シェイプ:

アイコンは、border、border-radius、background、transform などの CSS プロパティを使用して HTML 要素 (

、 など) をスタイル設定することにより、純粋な CSS を使用して作成できます。この方法は、単純な幾何学的形状やカスタム デザインによく使用されます。
CSS アイコンには、スケーラビリティ、カスタマイズの容易さ、画像と比べてファイル サイズが小さくなる可能性など、いくつかの利点があります。これらは、Web デザインに視覚要素を追加する多用途かつ効率的な方法となります。

素晴らしいフォント

プロジェクトに Font Awesome を含めます:
この行を に追加します。 HTML の:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

アイコンを使用する

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

<i class="fas fa-camera"></i>

マテリアルアイコン

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

に追加します:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

アイコンを使用する

アイコンを使用するには、 を追加します。クラスマテリアルアイコンとアイコン名を持つ要素:

<i class="material-icons">camera_alt</i>

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

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

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

<div class="icon-star"></div>

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 width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 2L2 7v10l10 5 10-5V7z"/>
</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 属性を追加して、アクセシビリティを常に考慮してください。
さまざまな方法を自由に試したり組み合わせたりして、プロジェクトに最適なものを見つけてください!

以上がCSS アイコンと例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html for include using class this border background transform

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。