CSS アイコンと例-CSSチュートリアル-php.cn

CSS アイコンと例

王林

リリース： 2024-07-30 22:56:43

オリジナル

823 人が閲覧しました

CSS Icons with examples

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 サイトの他の関連記事を参照してください。