作成したアイコン内にテキストを配置するにはどうすればよいですか?

場合によっては、開発者はアイコンにテキストを入力する必要があります。たとえば、「いいね！」アイコン内に「いいね！」の合計数を追加することで UI を改善したり、コメント アイコン内にコメントを追加したり、任意のアイコンに特定の数値を表示したりすることができます。

HTML では、テキストとアイコンを個別に追加できます。その後、テキストの位置を設定して、アイコンの中央に配置します。このチュートリアルでは、作成したアイコン内にテキストを配置するさまざまな例を学びます。

＃＃＃文法＃＃＃

ユーザーは次の構文に従ってテキストの位置を設定し、作成されたアイコンにテキストを配置できます。

リーリー

上記の構文の「絶対」位置は、親要素の位置に基づいてテキストの位置を変更します。さらに、アイコンの幅とpadding-topに基づいてテキストの幅を指定し、テキストをアイコンの中央に配置する必要があります。

例 1 (アイコンを使用した Ionic フレームワーク)

以下の例では、ionic フレームワークを使用して Web ページにアイコンを表示します。ここでは、Web ページにハートのアイコンを追加しました。さらにデジタルテキストも追加しました。 CSS では、アイコンのフォント サイズと「絶対」位置を設定します。さらに、テキストを中央に配置するようにテキストの幅と上部のパディングを設定します。

出力では、ユーザーはハートアイコンの中央にあるテキストを確認できます。

リーリー

例 2 (Font-awesome ライブラリを使用)

以下の例では、font-awesome ライブラリを使用して Web ページにアイコンを追加します。 font-awesome ライブラリには、変更可能なテキストを含む事前定義されたアイコンがいくつか含まれています。

ここでは、span 要素を使用してアイコンを追加します。さらに、アイコン要素とテキスト要素で異なるクラス名を使用し、テキスト要素をアイコンの中央に配置します。

出力では、アイコン内のテキストが確認できます。

リーリー

CSS を使用してアイコン内にテキストを追加する方法について学びました。親要素に基づいてテキストの位置を設定し、パディングやマージンを調整する必要があります。さらに、ユーザーは、事前に構築された SVG アイコンを使用する代わりに、CSS を使用してカスタム アイコンを作成し、その中にテキストを配置してみることもできます。

以上が作成したアイコン内にテキストを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。