【CSS】リンクタグの中に擬似要素でアイコンだけを表示させる【HTML】

コーディング
スポンサーリンク

fontawesomeなどで、タグを使って表示させることもできますが、今回は擬似要素でCSSからアイコンを表示させたいと思います。

 

擬似要素が入る位置

まず擬似要素が入る位置はこちらです。

タグの外ではなくタグの内側に入ります。

なのでこの仕組みを利用して、CSSで擬似要素を使ってAタグの中にアイコンだけを表示させたいと思います。

 

リンクタグの中に擬似要素でアイコンだけを表示させる

まずHTMLでこのようにAタグでリンク先だけを用意します。
Aタグの中身は空でOKです。

 

そしてCSSで擬似要素を書いていきます。
contentの中身やその他は使いたいアイコンに合わせて変えてください。

 

擬似要素を使う際の注意

  • 事前にfontawesomeが読み込まれていいない場合はリンクタグでfontawesomeを読み込む必要があります。
  • font-family、font-weightは使いたいアイコンによって変わります。

以上です。これでAタグの中にアイコンだけを表示させることができます。
Web制作の参考になれば幸いです。

コメント

タイトルとURLをコピーしました