CSS を使用してアイコンの色、サイズ、影のスタイルを設定する方法

アイコンは、ユーザーがコンテンツを理解し、操作するための迅速かつ簡単な方法を提供するため、Web サイトやアプリケーションの重要な部分です。ただし、デフォルトのアイコンを使用すると、Web サイトがありきたりで魅力のないものに見える可能性があります。 CSS を使用すると、アイコンの色、サイズ、影のスタイルを設定して、ユニークで視覚的に魅力的なユーザー エクスペリエンスを作成できます。

この記事では、CSS を使用してアイコンの色、サイズ、影をスタイル設定する方法を学びます。 CSS でアイコンのスタイルを設定するさまざまな方法を学びます。

CSS でのアイコンのスタイル設定に対するさまざまなアプローチ

方法 1: Font Awesome アイコンを使用する

アイコンのスタイルを設定する最初の方法は、CSS を使用してカスタマイズできるベクトル アイコンの拡張可能なライブラリを提供する人気のあるアイコン フォントであるフォント Awesome Icons を使用することです。 Font Awesome アイコンには、Web サイトのデザインに合わせてさまざまな色、サイズ、色合いを選択できます。

Font Awesome アイコンは非常に使いやすいです。まず、ヘッド セクション -

に次のコードを追加して、HTML ドキュメントに Font Awesome スタイルシートを含める必要があります。 リーリー

Font Awesome スタイルシートをインクルードした後は、関連付けられたクラスで i タグを使用して、HTML ドキュメント内で Font Awesome アイコンを使用できるようになります。詳細については、次の構文 -

を参照してください。 ＃＃＃文法＃＃＃

次の構文は、i 要素の色とテキストの影を定義します。

要素は、HTML アイコンを表すクラスで構成されます。

リーリー ＃＃＃例＃＃＃ 以下の例では、HTML5、CSS3、Github のアイコンの色をそれぞれ赤、青、黒に変更します。同時に、すべてのアイコンのサイズは 10em に設定され、各アイコンのテキストの影はそれぞれオレンジ、スカイブルー、グレーになります。

リーリー

方法 2: CSS アイコンを使用する

CSS アイコンは、Web サイトにアイコンを追加するもう 1 つの方法です。 CSS アイコンは、境界線の半径、ボックスの影、グラデーションなどの CSS プロパティを使用してアイコンのような形状を作成します。 CSS アイコンは軽量でカスタマイズが簡単で、任意のサイズに拡大縮小できます。

＃＃＃文法＃＃＃

以下の構文は、before または after 擬似要素を使用して CSS アイコンを作成し、関連する CSS プロパティを追加する方法を示しています。

リーリー ＃＃＃例＃＃＃

以下の例では、形状、サイズ、色の異なる 3 つの異なるアイコンを追加しました。 CSS アイコンの色は、ライトブルー、ライトレッド、ライトグリーンに設定されています。また、アイコンのサイズとボックスの影のさまざまな色も定義します。

リーリー

方法 3: SVG アイコンの使用

SVG (スケーラブル ベクター グラフィックス) アイコンは、Web サイトにアイコンを追加するもう 1 つの一般的な方法です。 SVG アイコンはベクターベースであるため、品質を損なうことなく任意のサイズに拡大縮小できます。 CSS を使用してカスタマイズし、色、サイズ、影を変更できます。

SVG アイコンを Web サイトに追加するには、まず使用する SVG アイコンを見つける必要があります。 SVG アイコンは Font Awesome などのサイトで見つけることができます。また、Adobe Illustrator や Inkscape などのベクター編集ソフトウェアを使用して独自のアイコンを作成することもできます。

＃＃＃文法＃＃＃

次の構文は、svg 要素のパディング、高さと幅、およびフィルターを定義します。 SVG アイコンのさまざまな色、サイズ、影を定義します。

リーリー ＃＃＃例＃＃＃

以下の例では、インライン SVG コードを使用して検索アイコンを表示し、CSS を使用してその色、サイズ、影のスタイルを設定します。ここでは、fill 属性を使用してアイコンの色を赤に変更し、width 属性と height 属性を使用してアイコンのサイズを 50px に増加し、filter 属性を使用してアイコンに影を追加します。

リーリー ＃＃＃結論は＃＃＃

CSS を使用してアイコンの色、サイズ、影をデザインすることは、Web サイトやアプリケーションにカスタムの外観を与える非常に簡単な方法です。 Font Awesome、SVG アイコン、または CSS アイコンを使用して、Web サイトのデザインにマッチするユニークで視覚的に魅力的なアイコンを作成できます。

以上がCSS を使用してアイコンの色、サイズ、影のスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。